fetch API

浏览器一定需要发出http请求，向后端请求资源。那么浏览器发起http请求的方式有哪些呢？

1. XMLHttpRequest

这是发http请求比较常见的做法，需要定义一个xhr对象，并配置相关请求信息，以及需要开发者监听事件，写回调处理。
这种做法比较麻烦

2. fetch

fetch API概念及使用：fetch API提供了一个js接口，用来请求和响应。还提供了一个全局方法fetch()。
相比于XMLHttpRequest，它是一种更简单、合理的请求资源的方式。
如何在项目中引入并使用呢？
由于fetch是相对较新的技术，会存在浏览器兼容性的问题，在IE或其他低版本浏览器中是不支持的。所以为了能够在所有浏览器中通用fetch，一般使用fetch的polyfill,有两种：

whatwg-fetch: 它实现了标准Fetch 规范的一个子集
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用法

为什么会需要对url编码
网络标准对URL做了规定：只有字母和数字[0-9a-zA-Z]、一些特殊符号"$-_.+!*'(),"[不包括双引号]、以及某些保留字，才可以不经过编码直接用于URL。
即，如果一段url里出现了上述允许的字符之外的字符，比如中文：http://春节那这段url就是无效的，只有编码后才能使用。
为什么需要用js统一编码的方法
在1的原因基础上（即url中如果有特殊字符，必须编码）。但是网络标准并没有规定具体的编码方法，而是把编码交给应用程序（浏览器）自己决定。导致不同浏览器，处理位于url上不同位置的特殊字符时，会按照不同的方法编码，从而得出不同的编码结果。
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)