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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
Vue最新防抖方案(必看篇)
Oct 30 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权限分配的实现代码
2013/04/28 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Django分组聚合查询实例分享
2020/04/29 Python
Keras loss函数剖析
2020/07/06 Python
执行总经理岗位职责
2014/02/03 职场文书
2014年标准化工作总结
2014/12/17 职场文书
校友回访母校寄语
2015/02/26 职场文书
追悼会悼词大全
2015/06/23 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
oracle索引总结
2021/09/25 Oracle
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS