Fetch API 入门使用

html5 引入了新的网络请求接口Fetch API，原生支持Promise，可配合 async/await 语法使用。

Fetch 实例

使用 fetch 用户数据列表。

fetch('/users')
.then(res=>res.json())//服务器返回的是json
.then(user=>{console.log(user);})
.catch(error=>{console.log(error);})
复制代码

async/await 语法

async function getUsers() {
  try {
    let res = await fetch('/users');
    let users = await res.json();
    console.log(users)
  } catch (error) {
   console.log(error)
  }
}
复制代码

fetch 返回的不是真正须要的数据，而是一个 Promise，全部还须要使用它提供的方法进一步获取想要的数据。

具体用法

两种调用方式：

fetch(url,options)
fetch(req,options)
复制代码

推荐使用第一种，一眼就能够看到url,更加直观。

options 是一个对象，可设置如下字段：

• method：请求方法，默认GET;
• headers：请头信息，能够是简单的对象，也能够是 Headers 的实例；
• body：发送数据。Blod、bufferSource、FormData、URLSearchParams、USVstring，GET、HEAD 没有body；
• mode：请求模式。
  • cors：跨域请求；
  • no-cors：只容许使用GET、HEAD、POST;
  • same-origin：同源请求；
  • navigate：支持页面导航（不太明白）。
• credentials：是否发送 cookies：
  • omit：不发送，默认；
  • same-origin：同源发送；
  • include：发送。
• cache：缓存策略：
  • default：请求以前检查缓存；
  • no-cache：有缓存，发送一个查询请求，缓存失效，再发送正常请求；
  • no-store：不检查缓存，直接请求；
  • reload：忽略缓存，拿到响应后，更新缓存；
  • force-cache：强制读取缓存，缓存过时，再发送正常请求；
  • only-if-cached：读取缓存，过时就报网络错误。 mode 设置为 same-origin 时有效。
• redirect：重定向时的处理方法：
  • follow：跟随；
  • error：报错；
  • manual：用户手动跟随。
• integrity：包含一个验证资源完整性的字符串。

Headers

Headers 用于构造请求头信息，构造函数接收一个对象，对象的key-value就是请求头的信息。

let headers = new Headers(
  {
    'content-type':'text/plain',
    'content-length':data.toString().length
  }
);
headers.append('X-Custom-header','AnotherValue');//追加
headers.has('content-type');//true 查询
headers.get('content-type');//'text/plain' 获取
// headers.getAll('content-type');//['text/plain'] getAll 被移除了
headers.delete('content-type');//删除
headers.set('content-type','json');//重写
复制代码

Request

请求对象。能够新建一个，也能够从已有的对象中继承。

let Url = '/users';
let req = new Request(Url,{method:'GET',headers})
// 扩展 request
let postReq= new Requset(req,{method:'POST'})
复制代码

Response

Response 实例是 fertch 处理完 promise 以后的返回的。也能够手动建立，在servoceWorkers 中才真实有用。

let res = new Response(body,init)
复制代码

body 能够是Bolb、BufferSource、FormData、URLSearchParams、USVString 这些值。

init 是一个对象，可包含如下字段：

• status：响应状态码；
• statusText：状态文本；
• headers：头部信息，普通对象或Headers 的实例。

response 的实例还有一些可读属性：

• ok：请求是否成功，状态码为 2xx 都为 true ；
• status：状态码；
• statusText：状态文本；
• bodyUesed：响应数据是否被用过；
• headers：头部信息；
• url：响应地址；
• type：响应类型：
  • basic：同源；
  • cors：跨域；
  • error：出错；
  • opaque：Request mode 设置为 no-cors 的响应。

response 有一些方法来 reslove 响应信息。

• json，解析响应信息为对象，resolve promise；
• text，…………字符串…………；
• bolb，转化响应Bold，resolve;
• formData,………………；
• arrayBuffer，…………。

Fetch Vs AJAX

• 响应状态为404或5xx，都resolve，可是 ok 为false。只有当网络故障或者请求被阻止了，才会 reject；
• 默认状况不发送不接收cookies，须要设置；
• POST 的数据须要转为JSON;
• 不能设置超时和取消请求，能够经过Promise.race，了模拟二者；
• 文件上传和下载获取不到进度，可以使用 response.body 是可读流，具备getReader，可根据这个来获取下载进度。；
• 不能直接获取到响应数据，须要调用响应方法，resolve 一下；

总结

• Fetch API 很底层，使用起来并不丝滑；
• Fetch 错误处理有点复杂；
• Fetch 不支持取消和超时设置；
• 上传和下载进度没有，使用可读流来获取，复杂性忽然升高了。

仍是使用原生的 xhr 和 axios 库来的爽快。

参考

• Fetch: Download progress
• Fetch: Abort
• 了解 Fetch API
• Fetch进阶指南