浏览器肯定须要收回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-fetchimport 'whatwg-fetch'npm install --save isomorphic-fetchimport 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 = urlfetch(url, options).then(res => {    cache.put(cacheUrl, res)})// match办法，从缓存中检索// 也返回一个promise，失去缓存到cacheUrl的响应内容const cacheResponse = await cache.match(cacheUrl)// add办法，也能够向缓存中增加。相当于fetch+put，一旦add了，相当于主动发申请cache.add(cacheUrl)