欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6的Fetch异步请求的实现方法

程序员文章站 2022-03-04 13:40:33
在前端的快速发展中,为了契合更好的设计模式,产生了fetch框架,fetch返回的信息比xmlhttprequest更丰富。但它目前还不是一个标准,它支持大部分常用的htt...

在前端的快速发展中,为了契合更好的设计模式,产生了fetch框架,fetch返回的信息比xmlhttprequest更丰富。但它目前还不是一个标准,它支持大部分常用的http 请求和响应的标准。

一. 一个完整的post请求和响应的过程

  var url = "/fetch";
     fetch(url,{
       method:"post",
       headers:{
         "content-type":"application/x-www-form-urlencoded"
       },
       body:"name=luwenjing&age=22"
     })
      .then(function (response){
        if (response.status == 200){
          return response;
        }
      })
      .then(function (data) {
       return data.text();
      })
      .then(function(text){
        console.log("请求成功,响应数据为:",text);
      })
      .catch(function(err){
        console.log("fetch错误:"+err);
      });

(1)fetch的参数有两个,第一个是url即请求的处理路径;

第二个是初始化信息,包括以下几种:

  • method:请求方法,常用的有get和post;
  • headers:请求头信息,最常用的就是表单格式的数据:”content-type”:”application/x-www-form-urlencoded”;
  • mode:控制是否允许跨域。same-origin(同源请求)、no-cors(默认)和cros(允许跨域请求);
  • cache:关于缓存的一些设置;
  • body:要发送到后台的参数,可以为arraybuffer,string,formdata等类型;

(2)从上面的代码我们可以知道fetch()方法返回的是一个promise对象;

(3)响应信息为传入then方法成功时的参数,相应包含很多http的响应信息,如下:

ES6的Fetch异步请求的实现方法

(4)可以判断响应的状态吗,返回请求成功的对应信息;

(5)通过状态转换,转换为指定的格式,如果是文本信息,直接text()方法就可以;若为json格式,则json()就可以转换为json格式信息,其实也就是自己请求数据格式时所设置的格式;

二. 后台处理代码:

import java.io.ioexception;
import java.io.writer;

/**
 * created by luwenjing on 2017/4/5.
 */
public class fetchservlet extends javax.servlet.http.httpservlet {
  protected void dopost(javax.servlet.http.httpservletrequest request, javax.servlet.http.httpservletresponse response) throws javax.servlet.servletexception, ioexception {
    string name = request.getparameter("name");
    string age = request.getparameter("age");
    system.out.println(name + ": " + age);
    writer out = response.getwriter();
    out.write("hello world!");
  }

  protected void doget(javax.servlet.http.httpservletrequest request, javax.servlet.http.httpservletresponse response) throws javax.servlet.servletexception, ioexception {
    dopost(request, response);
  }
}

后台成功输出:ES6的Fetch异步请求的实现方法

浏览器控制台成功打印:ES6的Fetch异步请求的实现方法

三. 和ajax 的对比

(1)上面的fetch代码很像jquery中的ajax,但是两者是不同的,fetch是原生的js,而jquery中的ajax是库封装的;

(2)ajax只能实现同源请求,fetch可实现跨域请求;

(3)ajax几乎所有的主流浏览器都支持,但fetch由于目前并没有被列入标准,只有像firefox最新版,chrome最新版,以及ie10+等以上才支持,如下图片所示;

ES6的Fetch异步请求的实现方法

注意:在body中向后台传递参数时,只有写成“key=value&key=value”的形式才会成功,其它方法后台接收到均为null,封装为formdata格式也不成功。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。