ES6获取异步请求的实现方法

在前端的快速发展中，为了更好地契合设计模式，产生了Fetch框架，Fetch返回的信息比XMLHttpRequest更丰富。但是目前还不是标准，支持最常用的http请求和响应标准。

1.完整的发布请求和响应流程

var URL='/fetch '；fetch(url，{ method:'post '，header RS : { ' Content-type ' : ' application/x-www-form-URL encoded ' }，body : ' name=luwenjingage=22 ' })。然后(function(response){ if(response . status==200){ return response；} }) .然后(function(data){ return data . text()；}).然后(function (text) {console.log('请求成功，响应数据为： '，text)；}).catch(function(err){ console . log(' fetch error : ' err)；});(1)fetch有两个参数1)fetch，第一个是url，也就是请求的处理路径；

第二个是初始化信息，包括以下内容：

方法：请求方法，常用的有get和post；Headers:请求头信息，最常用的数据是表单格式：“content-type”:“application/x-www-form-URL encoded”；模式：控制是否允许跨域。同源(同源请求)、无cors(默认)和cro(允许跨域请求)；缓存：关于缓存的一些设置；正文：发送到后台的参数可以是数组、字符串、表单数据等。(2)从上面的代码中，我们可以知道fetch()方法返回了一个promise对象；

(3)响应信息是成功传入then方法时的参数，对应包含大量http响应信息，如下：

(4)能否判断响应状态，返回请求成功的相应信息？

(5)通过状态转换，转换成指定的格式。如果是文本信息，可以直接使用text()方法；如果是json格式，可以将json()转换成json格式信息，这其实是你请求数据格式时设置的格式；

二.后台处理代码：

导入Java . io . ioexception；导入Java . io . writer；/** *由鲁文景于2017年4月5日创建。*/public class fetchServlet扩展javax . servlet . http . HttpServlet { protected void doPost(javax . servlet . http . HttpServletrequest request，javax . servlet . http . HttpServletresponse response)引发javax.servlet.ServletException，IOException { String name=request . GetParameter(' name ')；string age=request . GetParameter(' age ')；System.out.println(名称' : ' age)；writer out=response . getwriter()；out.write('hello world！');}受保护的void doGet(javax . servlet . http . HttpServletrequest请求，javax . servlet . Http . HttpServletresponse响应)抛出javax.servlet.ServletException，IOException { doPost(请求，响应)；}}成功的背景输出：

浏览器控制台成功打印：

三.与ajax的比较

(1)上面的Fetch代码与jQuery中的ajax非常相似，但它们有所不同。fetch是一个本机js，而jQuery中的ajax是由一个库封装的。

(2)ajax只能实现同源请求，而fetch可以实现跨域请求；

(3)ajax几乎所有主流浏览器都支持，但fetch目前还没有纳入标准，只有firefox最新版本、chrome最新版本、IE10等支持。如下图所示；

注意：在正文中将参数传递到后台时，只有以“key=valuekey=value”的形式写入，才会成功。其他方法在后台接收null，FormData格式的包不成功。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。