浏览器必须发送http请求向后端请求资源。那么浏览器发起http请求的方式有哪些呢？1.XMLHttpRequest这是发送http请求的常用方式。需要定义一个xhr对象，配置相关的请求信息，需要开发者监听事件，编写回调进行处理。这种做法比较麻烦2.fetchAPI概念及使用：fetchAPI提供了一个js接口，用于请求和响应。还提供了全局方法fetch()。与XMLHttpRequest相比，是一种更简单合理的资源请求方式。在项目中如何引入和使用？由于fetch是比较新的技术，会存在浏览器兼容性问题，在IE等低版本浏览器中不支持。所以为了能够在所有的浏览器中使用fetch，一般使用fetch的polyfill，有两种：fetch，直接引入whatwg-fetch2.1安装2.2使用fetch(url,option).then(response=>response.json()).then(data=>console.log(data));fetch是基于promise实现的，可以使用.then或者asyncawait来写异步代码。为了得到结果，必须使用response.json()方法来获取json内容。fetch()接受两个参数，第一个url是请求资源的路径，必填。第二个选项是可选参数，它是在自定义配置中传递的对象。详见上面fetch的使用。2.3其他2.3.1使用encodeURIComponent对url进行编码encodeURIComponent的编码历史encodeURI和encodeURIComponent的用法encodeURI和encodeURIComponent的区别为什么要对url进行编码网络标准规定URLs:onlylettersandnumbers[0-9a-zA-Z]，一些特殊符号“$-_.+!*'()”，[不包括双引号]，一些保留字可以直接在URL中使用，无需编码。即如果一个url中出现了上述允许字符以外的字符，比如中文：http://春节，那么这个url是无效的，只能编码后使用。之所以需要使用js统一编码，是基于原因1（即url中有特殊字符，必须进行编码）。但是网络标准并没有规定具体的编码方式，而是将编码留给应用程序（浏览器）自己决定。这样一来，不同的浏览器在处理位于url上不同位置的特殊字符时，就会对其进行不同的编码，从而导致不同的编码结果。encodeURIComponent是基于2，我们希望客户端只使用一种方法对url进行编码，所以我们只能使用一种js方法先对url进行编码，然后再提交给服务端，不给浏览器干预的机会。因为js函数的输出永远是一致的，这样就保证了url的编码结果永远是一样的。encodeURIComponent是编码函数之一。constresult=encodeURIComponent(uri)参数：uri，一个包含待编码文本的字符串规则：该方法不会对以下字符进行编码：ASCII字母和数字，以及这些标点符号：-_。！~*'().其他字符会按照UTF-8方式进行编码，对应的字符会被编码结果替换（每个字节前会加%）consturi="https://www.runoob.com/mytest.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的组成部分，比如搜索参数，这样的字符是不允许的=,&必须编码encodeURIonly对URL中完全禁止的字符进行编码。encodeURIComponent还对完全禁止的字符进行编码，此外，#、$、&、+、,、/、:、;、=、？和@字符。也就是说，encodeURIComponent比encodeURI可以编码更多的字符。2.3.2window.caches缓存请求和响应CacheStorage表示缓存对象的存储。我们可以通过全局的caches属性访问一个CacheStorage对象，实现缓存的创建、添加、删除等。它的作用一般是，如果我们要向服务器发送请求，路径是/xxx，通过caches，我们可以缓存本次请求的响应，如果下次有相同的请求，如果缓存没有过期，我们可以直接取出缓存的上次响应内容。参考main方法：//caches.open方法，传入缓存名称，创建缓存对象//返回promise，resolve是能匹配cache_name的缓存对象（不存在则创建）constCACHE_NAME='test-cache'constcache=awaitwindow.caches.open(CACHE_NAME)//cacheUrl表示一个请求路径，先fetch发起请求，得到response后缓存对象的put方法可以//手动将responseres添加到对应的requestcacheUrl里面。constcacheUrl=urlfetch(url,options).then(res=>{cache.put(cacheUrl,res)})//匹配方法，从缓存中检索//同样返回一个promise，获取缓存到cacheUrl的响应内容constcacheResponse=awaitcache.match(cacheUrl)//添加方法，也可以添加到缓存中。相当于fetch+put。一旦添加，就相当于自动发送了一个请求。])url：可以是绝对地址（比如完整的https://www.google.com），此时会忽略base。可以是相对地址（如/images），需要设置base参数，根据base构造base：如果url是相对地址，作为计算的基地址，如果参数值不能组合成一个完整的URL地址，会报TypeError错误。示例：url是一个绝对地址：leturl=newURL('https://www.google.com/url');url是一个相对地址：根据相对于现有URL的路径创建一个新的URLletbase='https://www.google.com'leturl=newURL('study',base)结果是一样的在这两种情况下。url对象有很多属性和方法，用于读写url：比如直接url.protocol获取协议：https：关于常用的搜索字符串，有两种读取方式：search属性：returnsURL地址字符串的查询字符，以?开头。返回的结果是字符串url.search//Result:?p1=v1&p2=v2searchParams:返回一个URLSearchParams对象，可以调用URLSearchParams对象的各种方法，非常方便的处理查询字符串constsearchParams=url.searchParams//获取search参数重新赋值namesearchParams.get('p1')//result:v1
