ES6的Fetch异步请求的实现方法

网络编程 2025/1/5 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

在前端的快速发展中，为了契合更好的设计模式，产生了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的响应信息，如下：

（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);
  }
}

后台成功输出：

浏览器控制台成功打印：

三. 和ajax 的对比

（1）上面的Fetch代码很像jQuery中的ajax，但是两者是不同的，fetch是原生的js，而jQuery中的ajax是库封装的；

（2）ajax只能实现同源请求，fetch可实现跨域请求；

（3）ajax几乎所有的主流浏览器都支持，但fetch由于目前并没有被列入标准，只有像firefox最新版，chrome最新版，以及IE10+等以上才支持，如下图片所示；

注意：在body中向后台传递参数时，只有写成“key=value&key=value”的形式才会成功，其它方法后台接收到均为null，封装为FormData格式也不成功。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

ES6,Fetch异步请求,ES6,异步请求,ES6,fetch

标签：

ES6,Fetch异步请求,ES6,异步请求,ES6,fetch

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“ES6的Fetch异步请求的实现方法”

暂无ES6的Fetch异步请求的实现方法的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月05日

ES6的Fetch异步请求的实现方法

ES6,Fetch异步请求,ES6,异步请求,ES6,fetch

jQuery时间戳和日期相互转换操作示例

JavaScript this绑定过程深入详解

评论“ES6的Fetch异步请求的实现方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接