fetch使用小结

1. 简介

fetch作为替代XMLHttpRequest(XHR)的新一代请求API拥有很大的魅力.其支持Promise的方法非常迷人,如:

fetch(`/data.json`).then(response => response.json()).then(res=>{  
    //do something
}).catch(err=>{
   //catch error
})

2. 注意事项

2.1. 浏览器Polyfill

由于fetch并不支持非现代浏览器,所以我们需要加载额外的Polyfill库来使老式浏览器兼容fetch API.如isomorphic-fetch(同时你还需要一个额外的Promise库支持,如bluebird).

2.2. option配置

  1. method: 请求类型,如GET, POST.
  2. headers: 请求头设置,你可以传输object对象或者Header对象.注意,header发送的头信息字段名将会被小写
  3. body: 请求内容,你可以传输Blob对象,BufferSource,FormData,URLSearchParams或者USVString(使用时注意Polyfill)
  4. mode: 设置跨域请求, cors(跨域), no-cors(非跨域)或者same-origin(同域)
  5. credentials: 设置请求的认证信息,我们可以设置omit(默认,不传输任何认证信息), same-origin, include.fetch默认不发送cookie的,如果你需要传输cookie,请开启此选项.
  6. cache: 缓存配置,
  7. redirect: 是否跳转
  8. referrer: 请求来源,no-referrer, client(默认), 或者一个地址

3. 参考