几乎市面上的App都少不了从服务器上获取数据，这就需要进行网络请求，RN中集成了很不错的链式请求数据的方法(fetch API)。
RN网络请求常用方法
fetch: 发送请求,默认Get请求
then : 传入一个回调函数，当上一次操作处理完,就会自动执行then的回调函数,并且自动把处理完的结果,作为参数传递给then的回调函数
response.json(): 把请求到的数据转换为json
catch : 在请求或者处理数据失败的时候,就会执行catch里的回调函数，捕获异常
GET请求
// 定义GET请求
getRequestData = (url) => {
let args = {
method:'GET',
}
fetch(url, args)
.then((response)=>{
return response.json();
})
.then((responseJson)=>{
Alert.alert("提示", responseJson);
})
.catch((error)=>{
Alert.alert("提示", error);
})
};
POST请求
POST请求有三种方式:
application/x-www-form-urlencoded： 普通http请求方式，参数是普通的url参数拼接
application/json： JSON请求方式，参数是json格式
multipart/form-data: 文件上传
Fetch还有可选的第二个参数，可以用来定制HTTP请求一些参数。你可以定制header参数，请求方式，提交数据。
application/x-www-form-urlencoded请求
注意:Content-Type:一定不要写错,否则服务器解析不出来
postRequestData = (url) => {
let formData = {
'code':'011Tq1lm1ME6jj0o4vmm1Y7Ukm1Tq1le',
};
var opts = {
method:'POST',
body:JSON.stringify(formData),
headers:{
'Authorization':'OAuth app_id=wx723cae7b28dca7c1, version=1.0, token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MzA3NzQzOTAsInN1YiI6IntcInVuaW9uSWRcIjpcIm9WTVVPd2hBRlBvNkJJTm5JX2NGTkxITVVha29cIixcImFwcElkXCI6XCJ3eDcyM2NhZTdiMjhkY2E3YzFcIn0ifQ.cGJ9x_XFnKgDMwjlQIe6o32USn5idLtD0Ael_XAtalQ',
'Content-Type':'application/x-www-form-urlencoded',
},
timeout:20 * 1000,
};
fetch(url, opts)
.then((response) => {
if (response.ok) {
return response.json();
}
})
.then((responseJson) => {
console.log("结果Code：" + responseJson.code);
console.log("结果message：" + responseJson.message);
console.log("请求的名字为：" + responseJson.data.nickName);
})
.catch((error) => {
console.log("错误信息为：" + error);
});
};
application/json请求
JSON.stringify(param) => JSON对象转字符串 {name:xmg} => '{name:xmg}'
因为body:只能放字符串,所以必须要把JSON对象转字符串
注意:Content-Type:一定不要写错,否则服务器解析不出来
postRequestData = (url) => {
let formData = {
'code':'011Tq1lm1ME6jj0o4vmm1Y7Ukm1Tq1le',
};
var opts = {
method:'POST',
body:JSON.stringify(formData),
headers:{
'Authorization':'OAuth app_id=wx723cae7b28dca7c1, version=1.0, token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MzA3NzQzOTAsInN1YiI6IntcInVuaW9uSWRcIjpcIm9WTVVPd2hBRlBvNkJJTm5JX2NGTkxITVVha29cIixcImFwcElkXCI6XCJ3eDcyM2NhZTdiMjhkY2E3YzFcIn0ifQ.cGJ9x_XFnKgDMwjlQIe6o32USn5idLtD0Ael_XAtalQ',
'Content-Type':'application/json',
'Accept': 'application/json',
},
timeout:20 * 1000,
};
fetch(url, opts)
.then((response) => {
if (response.ok) {
return response.json();
}
})
.then((responseJson) => {
console.log("结果Code：" + responseJson.code);
console.log("结果message：" + responseJson.message);
console.log("请求的名字为：" + responseJson.data.nickName);
})
.catch((error) => {
console.log("错误信息为：" + error);
});
};
有过iOS开发经验的小伙伴，可以在Xcode控制台输出打印服务器返回的JSON数据，但是RN中返回的JSON数据如果直接打印，会出现:[object:object]的输出信息，故如果想要查看服务器返回的内容，需要知道服务器返回数据的结构，来一层层的解析。
结果如下：
网友评论