一个使用提取的JavaScript异步请求的例子

序

相信大家都应该知道，在这个AJAX时代，如果要进行API等网络请求，就要通过XMLHttpRequest或者封装框架进行网络请求。现在，fetch框架只是为了提供更强大、更高效的网络请求而诞生的。虽然目前浏览器兼容性有一点问题，但是当我们发出一些异步请求时，我们可以使用fetch来发出完美的网络请求。下面不多说，我们来看看详细的介绍。

首先，让我们看看各种浏览器对fetch的本机支持。可以看出支持度不是很高。safari只支持10.1以后，ios只支持10.3以后，IE完全不支持。当然，新技术的发展总会经历这个过程。

Ajax请求

普通的Ajax请求，使用XHR发送一个json请求一般是这样的：

var xhr=new XMLHttpRequest()；xhr.open('GET '，URL)；xhr.responseType=' jsonxhr . onload=function(){ console . log(xhr . response)；};xhr . onerror=function(){ console . log(' error ')} xhr . send()；使用提取的方法：

提取(url)。然后(function(response){ return response . JSON()；}).然后(函数(数据){console.log(数据)})。catch(函数(e) {console.log ('error')})也可以使用async/await

尝试{ let response=wait fetch(URL)；让data=wait response . JSON()；console.log(数据)；} catch(e){ console . log(' error ')}使用await后，编写异步代码的感觉和同步代码一样酷。Await后面可以跟一个Promise对象，这意味着只有在等待Promise解析()后，执行才会继续。如果Promise被拒绝()或抛出异常，它将被外部尝试捕获.接住。

使用提取

提取的主要优点是

句法简洁，语义更丰富。它基于标准的Promise实现，支持异步/等待同构很方便，但也有它的缺点

默认情况下，提取请求没有cookie，因此需要设置提取(网址，{凭据：' include'})。当服务器返回类似400，500的错误代码时，提取不会被拒绝，只有当请求由于网络错误而无法完成时才会被拒绝。提取语法：

提取(网址，选项)。然后(函数(响应){//handleHTTP响应}，函数(错误){//handleNetwork错误})具体参数示例：

//兼容性包require(' babel-poly ill ')require(' es6-promise ')。poly fill()import ' whatwg-fetch ' fetch(URL，{method:' post '，body: JSON.stringify(data)，header RS : { ' Content-Type ' : ' application/JSON ' }，credentials: '同源' })。然后(函数(响应){ response . status/=number 100599 response . statustext/=String response . headers/=headers response.url//=字符串response.text()。然后(函数(response text){ 0.})}，函数(错误){错误。message//=string})参数描述

全球资源定位器(Uniform Resource Locator)

定义要获取的资源。它可以是：一个USVString字符串，包含要获取的资源的URL。请求对象。

选项(可选)

配置项对象，包括请求的所有设置。可选参数有：

Method:请求使用的方法，如GET和POST。Headers:以header对象或字节字符串的形式请求的标头信息。Body:请求的正文信息：它可能是Blob、BufferSource、FormData、URLSearchParams或USVString对象。请注意，对GET或HEAD方法的请求不能包含正文信息。mode:请求的模式，如cors、no-cors或同源。凭证：请求的凭证，如省略、同源或包含。缓存：的请求缓存模式为：默认、不存储、重新加载、不缓存、强制缓存或仅在缓存的情况下。反应

承诺并解决以下问题时，将返回响应对象：

属性：

Status (number)-HTTP请求结果参数，范围为100599 statusText(String)-服务器返回的状态报告ok(布尔值)-如果返回200，则返回true headers(标头)-返回标头信息，以及URL(String)-请求的地址方法详细描述如下：

文本()-以线的形式生成请求text json() -生成JSON.parse(responseText)的结果blob() -生成一个Blob arrayBuffer() -生成一个ArrayBuffer formData() -生成格式化的数据，可用于其他的请求其他方法：

克隆()响应。错误()响应。重定向()响应。头球有(姓名)(布尔值)-判断是否存在该信息头获取（名称)(字符串)-获取信息头的数据getAll(名称)(数组)-获取所有头部数据集合（名称、值)-设置信息头的参数追加（名称、值)-添加页眉的内容删除（名称)-删除页眉的信息forEach(函数（值，名称){ 0.}，[thisContext]) -循环读取页眉的信息使用实例

//获取钢性铸铁里保险商实验所的编号属性让uldom=document。getelementbyid('学生')；//单独创建一个json文件，获取地址让URL=' data . jsonfunction main(){ fetch(URL)} .然后(响应={返回响应。JSON()；}).然后（学生={让html=for(设i=0，l=students.lengthili ){字母名称=学生[i].姓名；让年龄=学生[我]。年龄；html=` li姓名：${name}，年龄：$ { age }/Li ` } uldom。innerHTMl=html});} main()；结合等待最终代码

让uldom=document。getelementbyid('学生')；让url=' data.jsonasync函数main(){ let respone=wait fetch(URL)；让学生=等待回应。JSON()；让html=for(设i=0，l=students.lengthili ){字母名称=学生[i].姓名；让年龄=学生[我]。年龄；html=` li姓名：${name}，年龄：$ { age }/Li ` } uldom。innerHTMl=html} main()；data.json文件内容如下：

[ {'name': '张三，' age':'3'}，{'name': '李万，' age':'1'}，{'name': '王二，' age':'4'}，{'name': '二狗，' age':'3'}，{'name': '狗蛋，' age':'5'}，{'name': '牛娃，' age':'7'} ]运行后结果是：

姓名：张三，年龄：3 姓名：李万，年龄：1 姓名：王二，年龄：4 姓名：二狗，年龄：3 姓名：狗蛋，年龄：5 姓名：牛娃，年龄：7源码下载

下载地址：http://夏仔。JB 51。net/201707/马援/js-fetch(jb51.net).rar

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。