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 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
javascript数组去重小结
Mar 07 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
js实现省级联动(数据结构优化)
Jul 17 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 图像函数大举例(非原创)
2009/06/20 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python匿名函数用法实例分析
2019/08/03 Python
python 实现视频 图像帧提取
2019/12/10 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
面试必备的求职信
2014/05/25 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL