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

 更新时间:2018年12月07日 11:33:45   作者:塞上江南果   我要评论

这篇文章主要介绍了ES6的Fetch异步请求的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在前端的快速发展中,为了契合更好的设计模式,产生了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的响应信息,如下:

(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);
  }
}

后台成功输出:

浏览器控制台成功打印:

三. 和ajax 的对比

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

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

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

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

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

相关文章

  • 可以将word转成html的js代码

    可以将word转成html的js代码

    这段很短的代码,可以将word转出html格式的代码,当然word自己也带的,另存为里面就有的,喜欢的朋友可以试试。
    2010-04-04
  • JS截取字符串实例详解

    JS截取字符串实例详解

    这篇文章主要介绍了JS截取字符串的方法,结合实例形式较为详细的分析了JavaScript截取字符串的常用函数与具体使用技巧,并附带说明了JS截取字符串substr和substring方法的区别,需要的朋友可以参考下
    2015-11-11
  • javascript面向对象包装类Class封装类库剖析

    javascript面向对象包装类Class封装类库剖析

    一个从来没有接触过javascript的技术人员,几小时内就可以写出一个简单有用的程序代码;想写出高性能的代码,同样需要具备一个高级程序员的基本素养,javascript也是如此
    2013-01-01
  • Javascript实现找不同色块的游戏

    Javascript实现找不同色块的游戏

    先给大家说下游戏规则:在变化数量的颜色块里找出一个不同颜色的块点击。下面通过js代码给大家分享找不同色块的游戏实现方法,需要的朋友参考下吧
    2017-07-07
  • JavaScript的原型继承详解

    JavaScript的原型继承详解

    这篇文章主要详细介绍了JavaScript的原型继承的相关资料,十分详细,需要的朋友可以参考下
    2015-02-02
  • HTML页面定时跳转方法解析(2种任选)

    HTML页面定时跳转方法解析(2种任选)

    本文主要对HTML页面定时跳转进行方法介绍:1、meta refresh 实现。2、JavaScript 实现。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JS加密插件CryptoJS实现AES加密操作示例

    JS加密插件CryptoJS实现AES加密操作示例

    这篇文章主要介绍了JS加密插件CryptoJS实现AES加密操作,结合实例形式分析了CryptoJS插件的具体设置与AES加密操作实现技巧,需要的朋友可以参考下
    2018-08-08
  • javascript中为某个元素指定事件的三种方式

    javascript中为某个元素指定事件的三种方式

    在javascript中,可以为某个元素指定事件,指定的方式有以下三种使用onclick属性,使用addEvenListener()方法
    2014-08-08
  • JavaScript定义类的几种方式总结

    JavaScript定义类的几种方式总结

    本篇文章主要是对JavaScript定义类的几种方式进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • swiper自定义分页器使用方法详解

    swiper自定义分页器使用方法详解

    这篇文章主要为大家详细介绍了swiper自定义分页器的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12

最新评论