fetch的使用心得

十多年来，我们一直使用 XMLHttpRequest（XHR）来发送异步请求，XHR 很实用，但并不是一个设计优良的 API，在设计上并不符合职责分离原则，输入、输出以及状态都杂糅在同一对象中，使用事件机制来跟踪状态变化。基于事件的模型与最近流行的 Promise 和 generator 异步编程模型不太友好

有别于ajax的事件机制，fetch采用Promise来实现，使我们的代码书写起来更优雅

fetch(url).then(resp => { 
   if (resp.ok)  
    ...
 })
复制代码

在react的使用中，为了一个ajax把整个jquery引进来值得吗？或许fetch是一个不错的选择！

fetch的用法很简单，首先封装一个Fetch方法

function Fetch(url, options) {
  return fetch(url, {credentials: 'include', ...options})
    .then((res) => res.json())
    .then(json => json)
    .catch((e) => console.log('error', e))
}
复制代码

• 由于Fetch 跨域请求时默认不会带 cookie，需要时得手动指定 credentials: 'include'

再封装一个GET方法

function GET(url, data = {}, options = {}) {
  this.send = () => {
    const _url = encodeQuery(url, data);
    return Fetch(_url, {
      method: 'GET',
      ...options
    },)
      .then((res) => res)
      .catch((err) => {throw err})
  }
}
复制代码

使用起来很简单

new GET('url', {params})
   .send()
   .then(resp => {
    你的操作...
})

复制代码

然后是POST方法

function POST(url, data = {}, option = {}) {
  this.send = () => {
    return Fetch(url, {
      method: 'POST',
      headers: {
        "Content-Type": "application/json"
      },
      body: typeof data === 'object' ? JSON.stringify(data) : data,
      ...option
    })
      .then(res => res)
      .catch((err) => {throw err})
  }
}
复制代码

• Content-Type属性指定请求和响应的HTTP内容类型
• 把参数放进body里面，后端就可以通过req.body拿到了

使用方法

new POST(url, {params})
  .send()
  .then()
复制代码

resful API 还有

• PUT方法用于更新资源
• DELETE方法用于删除资源

其实现于POST方法类似

当然了，如果你想再项目中使用fetch，需要引入一个polyfill，其源码400行左右，不大。

npm i fetch-polyfill --save

import 'fetch-polyfill';
复制代码

世间安得两全法，不负如来不负卿。

点击下面链接获取源码

fetch