ES6的Fetch異步請求

在前端的快速發展中，為了契合更好的設計模式，産生了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 == ){
                    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格式也不成功。