React Native --网络请求(fetch)

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

结果如下：

总结

以上是生活随笔为你收集整理的React Native --网络请求(fetch)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。