fetch API

浏览器一定需要发出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用法
encodeURI和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

与encodeURIComponent方法相似的，还有一个encodeURI方法，它们区别是：
首先从字面理解，encodeURIComponent是编码URI组件，而encodeURI就是编码整体URL
更具体的区别是：
作为一个整体的URL，有一些特殊字符是被允许的： :，?，=，&，#
但是，作为URL的组件，如搜索参数，这种字符就不被允许 =，& 必须被编码

• encodeURI 只编码 URL 中完全禁止的字符。
• encodeURIComponent 也编码完全禁止的这类字符，此外，还编码 #，$，&，+，,，/，:，;，=，? 和 @ 字符。

也就是说，encodeURIComponent能够编码的字符比encodeURI要多

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)

2.3.3 URL 对象

URI和URL区别
URL类用于创建和解析URL
创建一个URL对象：new URL(url, [base])

• url:
  可以是绝对地址（如 完整的https://www.google.com),此时会忽略base
  可以是相对地址（如 /images），需要设置base参数，以base为基础构造
• base: 如果url是相对地址，作为计算的基础地址

如果参数值无法组合成完整URL地址，则会报TypeError错误。

例子：

• url是绝对地址：

  let url = new URL('https://www.google.com/url');

• url是相对地址：根据相对于现有 URL 的路径创建一个新的 URL

  let base = 'https://www.google.com'
  let url = new URL('study', base)

两种情况得到的结果是一样的。
url对象有很多属性和方法，用来读写url：

比如，直接 url.protocol , 得到协议：https:

关于常用的搜索字符串，有两个方法可以读取：

1. search属性：返回URL地址的查询字符串，且以?开头。返回结果是字符串

   url.search
   // 结果：?p1=v1&p2=v2

2. searchParams：返回一个URLSearchParams对象，可以调用URLSearchParams对象各种方法，对查询字符串进行非常方便的处理

   const searchParams = url.searchParams
   // 获取搜索参数重指定name的值
   searchParams.get('p1')
   // 结果：v1