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 相关文章推荐
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
php中JSON的使用方法
2015/04/30 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
PHP CURL使用详解
2019/03/21 PHP
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python正则分析nginx的访问日志
2017/01/17 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
一道python走迷宫算法题
2018/01/22 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
幼儿运动会邀请函
2014/01/17 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
python_tkinter弹出对话框创建
2022/03/20 Python