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 相关文章推荐
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
javascript实现点击小图显示大图
Nov 29 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 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
php实现简单四则运算器
2020/11/29 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
django基于restframework的CBV封装详解
2019/08/08 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
《风娃娃》教学反思
2014/04/19 职场文书
保密工作承诺书
2014/08/29 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
大学军训的体会
2014/11/08 职场文书
工作收入证明范本
2015/06/12 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
PHP RabbitMQ消息列队
2022/05/11 PHP