前端杂谈 · Web

Fetch 代替 Ajax 的浏览器 API

小编 · 4月28日 · 2020年

Fetch 是什么?

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

Fetch 代替 Ajax 的浏览器 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 的缺点

  1. 由于是基于 Promise 一旦发送请求就无法中断,需要自己实现。
  2. 没有请求超时配置,需要自己实现。
  3. 当后端发生错误,fetch 响应依然是正常,需要自己处理

参考文献

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

5 条回应

必须 注册 为本站用户, 登录 后才可以发表评论!

  1. 匿名2020-5-6 · 21:26

    感谢博主的制作

  2. 匿名2020-5-3 · 0:58

    好兄弟

  3. 匿名2020-4-30 · 10:55

    可以可以

  4. 匿名2020-4-28 · 23:33

    良心网站

  5. 匿名2020-4-28 · 17:13

    页面很漂亮,内容很详实