乐趣区

关于前端:fetch-API

jiezi

浏览器肯定须要收回 http 申请，向后端申请资源。那么浏览器发动 http 申请的形式有哪些呢？

1. XMLHttpRequest

这是发 http 申请比拟常见的做法，须要定义一个 xhr 对象，并配置相干申请信息，以及须要开发者监听事件，写回调解决。
这种做法比拟麻烦

2. fetch

fetch API 概念及应用：fetch API 提供了一个 js 接口，用来申请和响应。还提供了一个全局办法 fetch()。
相比于 XMLHttpRequest，它是一种更简略、正当的申请资源的形式。
如何在我的项目中引入并应用呢？
因为 fetch 是绝对较新的技术，会存在浏览器兼容性的问题，在 IE 或其余低版本浏览器中是不反对的。所以为了可能在所有浏览器中通用 fetch，个别应用 fetch 的 polyfill, 有两种：

  1. whatwg-fetch: 它实现了规范 Fetch 标准的一个子集
  2. isomorphic-fetch: 正如它的名字，是同构的 fetch，是间接引入了 whatwg-fetch

2.1 装置

npm install --save whatwg-fetch
import 'whatwg-fetch'


npm install --save isomorphic-fetch
import fetch from "isomorphic-fetch";

2.2 应用

fetch(url, option)
  .then(response => response.json())
  .then(data => console.log(data));

fetch 是基于 promise 实现的，能够用.then 或 async await 来写异步代码。为了获取后果，必须应用 response.json() 办法，获取 json 内容。

fetch()承受两个参数，第一个 url 是申请资源的门路，必选。
第二个 option 是可选参数，它是一个对象，传入自定义配置。具体可看上方应用 fetch。

2.3 其余

2.3.1 应用 encodeURIComponent 进行 url 的编码

url 编码历史
encodeURIComponent 用法

  1. 为什么会须要对 url 编码
    网络规范对 URL 做了规定：只有字母和数字 [0-9a-zA-Z]、一些特殊符号 ”$-_.+!*'(),”[不包含双引号]、以及某些保留字，才能够不通过编码间接用于 URL。
    即，如果一段 url 里呈现了上述容许的字符之外的字符，比方中文：http:// 春节 那这段 url 就是有效的，只有编码后能力应用。
  2. 为什么须要用 js 对立编码的办法
    在 1 的起因根底上（即 url 中如果有特殊字符，必须编码）。然而网络规范并没有规定具体的编码方法，而是把编码交给应用程序（浏览器）本人决定。导致不同浏览器，解决位于 url 上不同地位的特殊字符时，会依照不同的办法编码，从而得出不同的编码后果。
  3. encodeURIComponent
    基于 2，咱们想要客户端只应用一种办法对 url 编码，就只能用一个 js 办法，先对 url 编码，再提交给服务器，不给浏览器插手的机会。因为 js 函数的输入总会是统一的，这样保障 url 的编码后果总会是同一个。encodeURIComponent 就是其中一个编码函数。

const result = encodeURIComponent(uri)

  • 参数：uri，一个字符串，含有会被编码的文本

  • 规定：该办法不会对以下字符编码：ASCII 字母和数字，以及这些标点符号：– _ . ! ~ * ‘ ()。对其余字符都会依照 UTF- 8 的办法编码，把对应字符替换为编码后果（会在每个字节前加 %）

    const uri="https://www.runoob.com/my test.php?name=ståle&car=saab"

encodeURIComponent(uri)

// 输入
https%3A%2F%2Fwww.runoob.com%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab

2.3.2 window.caches 对申请、响应进行缓存

CacheStorage 示意了 cache 对象的存储，咱们能够通过全局的 caches 属性，拜访一个 CacheStorage 对象，实现对缓存的创立、增加、删除等操作。
它的作用个别就是，如果咱们要向服务器发送一个申请，门路是 /xxx，通过 caches，就能够缓存这个申请的响应，如果下次再有雷同的申请，在缓存没过期的状况下，能够间接拿出缓存的上次的响应内容。
参考

次要办法：

// caches.open 办法，传入缓存名称，创立一个缓存对象
// 返回一个 promise，resolve 是能够匹配 cache_name 的一个 cache 对象（如果不存在，则创立）const CACHE_NAME = 'test-cache'
const cache = await window.caches.open(CACHE_NAME)

// cacheUrl 代表一个申请门路，先 fetch 发动申请，拿到响应后，cache 对象的 put 办法，能够
// 把响应 res 手动增加到对应的申请 cacheUrl 里。const cacheUrl = url
fetch(url, options).then(res => {cache.put(cacheUrl, res)
})

// match 办法，从缓存中检索
// 也返回一个 promise，失去缓存到 cacheUrl 的响应内容
const cacheResponse = await cache.match(cacheUrl)

// add 办法，也能够向缓存中增加。相当于 fetch+put，一旦 add 了，相当于主动发申请
cache.add(cacheUrl)
退出移动版