几乎市面上的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]的输出信息,故如果想要查看服务器返回的内容,需要知道服务器返回数据的结构,来一层层的解析。
结果如下: