Fetch 代替 Ajax 的浏览器 API

by nick / On 2019年10月1日 / In js

Fetch 是什么？

Fetch 是基于 Promise 的用于发送异步 HTTP 请求的浏览器 API，目前大部分浏览器都支持，除了 IE ，如果需要兼容 IE , GitHub 上有发布的 polyfill 地址：https://github.com/github/fetch ，使 Fetch API 可以在任何浏览中使用。

语法说明

一共两个参数，第一个为 url 字符串类型，必传参数，第二个为配置项，对象类型，可选参数。
Fetch API 一共包含四个对象，分别为： Headers Body Request Response
fetch() 会返回一个 promise 。然后我们用 then() 方法编写处理函数来处理 promise 中异步返回的结果。

fetch(url, [{options}])
  .then(response => response.json())
  .then(data => console.log(data))

常用配置项说明

// 请求方式
method: "GET",

// 请求头headers   
headers: {
 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},

// 是否携带 cookie , omit: 从不发送cookies, same-origin 只有当URL与响应脚本同源才发送 cookies , include 总是发送请求资源域在本地的 cookies 验证信息  
credentials: 'include', 

// cors 表示同域和带有 CORS 响应头的跨域下可请求成功. 其他请求将被拒绝,包含请求的模式 (例如： cors, no-cors, same-origin)
mode: 'cors',

//包含请求的缓存模式 (例如： default, reload, no-cache)
cache: 'default',

default: 浏览器从 HTTP 缓存中寻找匹配的请求.
no-store: 浏览器在不先查看缓存的情况下从远程服务器获取资源，并且不会使用下载的资源更新缓存
reload: 请求之前将忽略 http 缓存的存在, 但请求拿到响应后, 它将主动更新 http 缓存.
no-cache: 如果存在缓存, 那么 fetch 将发送一个条件查询 request 和一个正常的 request , 拿到响应后, 它会更新 http 缓存.
force-cache: 浏览器在其 HTTP 缓存中查找匹配的请求。1,如果存在匹配，新鲜或过时，则将从缓存中返回。2,如果没有匹配，浏览器将发出正常请求，并使用下载的资源更新缓存
only-if-cached: fetch 强行取缓存,（ 即使缓存过期了也从缓存取）. 如果没有缓存, 浏览器将返回错误

Fetch 使用方式

普通调用

fetch('https://wp.hellocode.name')
  .then(response => response.text())
  .then(data => console.log(data))

捕获错误

fetch('https://wp.hellocode.name')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(err => console.log(err))

GET 请求

fetch(url, { 
    method: 'GET'
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

POST 请求

fetch(url, { 
    method: 'POST',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
    body: JSON.stringify({ name: 'a', password: 'b',})
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

完整示例

fetch(url, { 
    method: 'POST',
    credentials: 'include',
    mode: 'cors',
    cache: 'default',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
    body: JSON.stringify({ name: 'a', password: 'b',})
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

Fetch 的缺点