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 相关文章推荐
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
javascript数组的使用
Mar 28 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
Angular2数据绑定详解
Apr 18 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
js实现购物车商品数量加减
Sep 21 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
php简单复制文件的方法
2016/05/09 PHP
php常用字符函数实例小结
2016/12/29 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python实现在线音乐播放器
2017/03/03 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
python ---lambda匿名函数介绍
2019/03/13 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
小学教师教学随笔
2015/08/14 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
python字典的元素访问实例详解
2021/07/21 Python