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


Posted in Javascript onDecember 07, 2018

在前端的快速发展中,为了契合更好的设计模式,产生了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格式也不成功。

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

Javascript 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
ext读取两种结构的xml的代码
Nov 05 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
JavaScript this绑定过程深入详解
Dec 07 #Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 #Javascript
如何手动实现es5中的bind方法详解
Dec 07 #Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 #Javascript
vue+SSM实现验证码功能
Dec 07 #Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 #Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 #Javascript
You might like
在PHP中操作Excel实例代码
2010/04/29 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
Prototype框架详解
2015/11/25 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
js转换对象为xml
2017/02/17 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Python实现识别手写数字大纲
2018/01/29 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python实现发送邮件
2021/03/02 Python
大学生村官心得体会范文
2014/01/04 职场文书
支部书记四风对照材料
2014/08/28 职场文书
如何写股份合作协议书
2014/09/11 职场文书
走群众路线剖析材料
2014/10/09 职场文书
新闻人物通讯稿
2014/10/09 职场文书
学生会个人总结范文
2015/02/15 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS