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：缓存策略：

  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：响应类型：

  no-cors
  

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

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