快捷導(dǎo)航

ES6的Fetch異步請求的實現(xiàn)方法

更新時間：2018年12月07日 11:33:44 作者：塞上江南果

這篇文章主要介紹了ES6的Fetch異步請求的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在前端的快速發(fā)展中，為了契合更好的設(shè)計模式，產(chǎn)生了Fetch框架，F(xiàn)etch返回的信息比XMLHttpRequest更豐富。但它目前還不是一個標(biāo)準(zhǔn)，它支持大部分常用的http 請求和響應(yīng)的標(biāo)準(zhǔn)。

一. 一個完整的post請求和響應(yīng)的過程

  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("請求成功，響應(yīng)數(shù)據(jù)為:",text);
      })
      .catch(function(err){
        console.log("Fetch錯誤:"+err);
      });

（1）fetch的參數(shù)有兩個，第一個是url即請求的處理路徑；

第二個是初始化信息，包括以下幾種：

method：請求方法，常用的有g(shù)et和post；
headers：請求頭信息，最常用的就是表單格式的數(shù)據(jù)：”Content-type”:”application/x-www-form-urlencoded”；
mode：控制是否允許跨域。same-origin（同源請求）、no-cors（默認(rèn)）和cros（允許跨域請求）；
cache：關(guān)于緩存的一些設(shè)置；
body：要發(fā)送到后臺的參數(shù)，可以為ArrayBuffer，String，F(xiàn)ormData等類型；

（2）從上面的代碼我們可以知道fetch()方法返回的是一個promise對象；

（3）響應(yīng)信息為傳入then方法成功時的參數(shù)，相應(yīng)包含很多http的響應(yīng)信息，如下：

（4）可以判斷響應(yīng)的狀態(tài)嗎，返回請求成功的對應(yīng)信息；

（5）通過狀態(tài)轉(zhuǎn)換，轉(zhuǎn)換為指定的格式，如果是文本信息，直接text()方法就可以；若為json格式，則json()就可以轉(zhuǎn)換為json格式信息，其實也就是自己請求數(shù)據(jù)格式時所設(shè)置的格式；

二. 后臺處理代碼：

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

后臺成功輸出：