ReactNative网络请求之Fetch

注意:网上的各种关于fetch的API已经更多，本文不做过多解释，本文重点解决新手第一次使用fetch遇到的困惑

现阶段市场上的各种Ajax请求库琳琅满目，不论是vue1.0的vue—resource还是vue2.0的axios都是基于promise对象封装的Ajax库，类似如下结构:

xxx(url)

.then(成功语句)

.catch(错误处理)

而ReactNative也有自己的Ajax请求库fetch,fetch并不是RN所独，官方只是采用了fetch并且把他封装成全局方法，所以用的时候并不需要额外引用，直接使用即可。首先来看一下fetch的结构:

fetch(url)

.then(res=> res.json())

.then(data => console.log(data))

.catch(e => console.log("Oops, error", e))

1.为什么多了一个.then(res=> res.json())

说好的then（成功），catch（失败）呢，为什么多出一个then？首先要明确前后端通信永远都是以字符串string来进行的,所以前台发送给后台的json数据都需要使用JSON.stringify来转换成字符串，而后台发送过来的json字符串"{retcode:'ok',data:{a:1}}"都需要使用eval或者JSON.parse()来转换成json才能使用data.a，那么很多时候我们为什么没有这么做呢，因为很多Ajax库已经自动做完了这一步，例如jQuery的Ajax就不需要，因为他已经自动帮你把传过来的字符串转化成json了。所以fetch中的res.json()的json()和JSON.parse()是同一个东西,只是他封装成json（）这个方法而已。

既然如此为何fetch不像jQuery哪有把这一步自动执行，还需要我们每次多写一句res.json()呢？

由于众所周知的原因在开发RN的时候我们无法在浏览器中的network中看到Ajax请求详情，这是因为App的打包和运行机制造成的，那么问题来了，假如我们和后台交互的过程中出现错误，去哪里看错误信息？这时候我们就可以去res.json()之前去打印信息，因为这里面是未经过任何处理的字符串，可以一眼看出问题的所在:

fetch(url)

.then(res=>{

console.log(res)//未经过处理的string

res.json()

})

.then(data => console.log(data))

.catch(e => console.log("Oops, error", e))

所以每次都要写多写一次json()不是闲着没事干，而是大有用处的

2.如何使用fetch进行同步请求

对不起，fetch天生就是异步请求，不存在同步请求。那么如果我们有一个同步需求怎么办，例如我微信发朋友圈有两个过程:1上传图片成功后拿到后台返回的图片地址，2将后台的返回的地址和写的文字一起保存在数据库。这就是一个同步需求，必须先上传图片再保存数据，终极大招:只能利用js从上而下阻塞式解析来解决了，把postData放在uploadImage的成功回调函数里面不就行了吗

uploadImage:

fetch(url)

.then(res=> res.json())

.then(data => {

  _this.postData(data)

})

.catch(e => console.log("Oops, error", e))