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

 更新时间:2018年12月07日 11:33:44   作者:塞上江南果  
这篇文章主要介绍了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格式也不成功。

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

相关文章

  • 利用JS实现数字增长

    利用JS实现数字增长

    做项目时候常常遇到,要做一个数字滚动增加的效果。如何利用JavaScript实现数字增长效果,一起来跟本文学习学习。
    2016-07-07
  • JavaScript实现京东秒杀效果

    JavaScript实现京东秒杀效果

    这篇文章主要为大家详细介绍了JavaScript实现京东秒杀效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • JavaScript面试题大全(推荐)

    JavaScript面试题大全(推荐)

    在javascript开发中,js面试题是必问的一项,今天小编抽时间给大家整理些js常见的面试题,对js面试题相关知识感兴趣的朋友一起看看吧
    2016-09-09
  • JavaScript随机数的组合问题案例分析

    JavaScript随机数的组合问题案例分析

    这篇文章主要介绍了JavaScript随机数的组合问题,结合具体案例形式分析了JavaScript随机数的组合问题相关算法原理、实现技巧与注意事项,需要的朋友可以参考下
    2020-05-05
  • JavaScript中变量提升 Hoisting

    JavaScript中变量提升 Hoisting

    因为这个问题很是经典,而且容易出错,所以在介绍一次。哈哈。莫怪哦。
    2012-07-07
  • JavaScript单一职责原则深入分析

    JavaScript单一职责原则深入分析

    这篇文章主要介绍了理解JavaScript单一职责原则,单一职责原则(SRP:Single responsibility principle)又称单一功能原则,面向对象五个基本原则(SOLID)之一,下文更多相关介绍感兴趣的小伙伴可以参考一下
    2022-08-08
  • js实现简单的选项卡效果

    js实现简单的选项卡效果

    本文主要介绍了js实现简单的选项卡效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • javascript+xml实现简单图片轮换(只支持IE)

    javascript+xml实现简单图片轮换(只支持IE)

    看着许多网站都有广告自动轮换;自己试着写了一个图片轮换,代码和功能都很简单,只支持IE的,FF的还要加些东东,需要了解的朋友可以参考下
    2012-12-12
  • webpack自定义loader全面详解

    webpack自定义loader全面详解

    这篇文章主要为大家介绍了webpack自定义loader全面详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 关于base64编码和解码的js工具函数

    关于base64编码和解码的js工具函数

    这篇文章主要介绍了关于base64编码和解码的js工具函数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02

最新评论