摘要：前言中新增了一種數(shù)據(jù)請求的方式，就是，它和有許多相似的功能，但是相比被設(shè)計成更具可擴展性和高效性。該模式支持跨域請求，顧名思義它是以的形式跨域當然該模式也可以同域請求不需要后端額外的支持其對應的為。

var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "json";

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(e => console.log("Oops, error", e))

兩段代碼相比之下，fetch更為簡潔，而且fetch請求屬于promise結(jié)構(gòu)，直接.then()方法處理回調(diào)數(shù)據(jù)，當出錯時，會執(zhí)行catch方法,而且promise避免了回調(diào)金字塔的問題。

目前谷歌瀏覽器對fetch的支持良好，具體支持情況如下圖

當然，你也可以去這里查看can i use

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(e => console.log("Oops, error", e))

如果需要傳遞參數(shù)，需要拼接在url。
后面這里的調(diào)用的第一個then函數(shù)里面，返回結(jié)果是一個可讀流形式

如果請求的是json數(shù)據(jù)，需要調(diào)用response.json()(這里的response是傳遞的參數(shù))將可讀流解析為json數(shù)據(jù)，在下一個then方法中，就可以得到想要的json數(shù)據(jù)了

同理，如果請求的txt文本數(shù)據(jù)，則需要調(diào)用response.text()來解析...更多調(diào)用的解析方法如下

response.arrayBuffer()
讀取 Response對象并且將它設(shè)置為已讀（因為Responses對象被設(shè)置為了 stream 的方式，所以它們只能被讀取一次） ,并返回一個被解析為ArrayBuffer格式的promise對象

response.blob()
讀取 Response對象并且將它設(shè)置為已讀（因為Responses對象被設(shè)置為了 stream 的方式，所以它們只能被讀取一次） ,并返回一個被解析為Blob格式的promise對象

response.formData()
讀取Response對象并且將它設(shè)置為已讀（因為Responses對象被設(shè)置為了 stream 的方式，所以它們只能被讀取一次） ,并返回一個被解析為FormData格式的promise對象

response.json()
讀取 Response對象并且將它設(shè)置為已讀（因為Responses對象被設(shè)置為了 stream 的方式，所以它們只能被讀取一次） ,并返回一個被解析為JSON格式的promise對象

response.text()
讀取 Response對象并且將它設(shè)置為已讀（因為Responses對象被設(shè)置為了 stream 的方式，所以它們只能被讀取一次） ,并返回一個被解析為USVString格式的promise對象

對于catch方法，只有報程序出錯的時候才會執(zhí)行。

 fetch(url,{
            method:"POST",
            headers:{
                "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
            },
            body:data
        })
        .then(res=>res.json())
        .then(data=>console.log(data))

method：設(shè)置設(shè)置請求的方式，默認是get，另外還有PUT、DELETE
headers：設(shè)置請求頭信息，當然，這里面還可以設(shè)置別的信息，比如：

var u = new URLSearchParams();
u.append("method", "flickr.interestingness.getList");
u.append("api_key", "");
u.append("format", "json");
u.append("nojsoncallback", "1");

fetch(url,{
            method:"POST",
            headers:u,
            body:data
        })
        .then(res=>res.json())
        .then(data=>console.log(data))

另外，fetch可以在header中設(shè)置CORS跨域

    u.append("Access-Control-Allow-Origin", "*");  
    u.append("Access-Control-Allow-Headers", "X-Requested-With");  
    u.append("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    u.append("X-Powered-By"," 3.2.1")  

fetch的mode配置項有3個值，如下：

same-origin：該模式是不允許跨域的，它需要遵守同源策略，否則瀏覽器會返回一個error告知不能跨域；其對應的response type為basic。

cors: 該模式支持跨域請求，顧名思義它是以CORS的形式跨域；當然該模式也可以同域請求不需要后端額外的CORS支持；其對應的response type為cors。

no-cors: 該模式用于跨域請求但是服務器不帶CORS響應頭，也就是服務端不支持CORS；這也是fetch的特殊跨域請求方式；其對應的response type為opaque。

針對跨域請求，cors模式是常見跨域請求實現(xiàn)，但是fetch自帶的no-cors跨域請求模式則較為陌生，該模式有一個比較明顯的特點：

該模式允許瀏覽器發(fā)送本次跨域請求，但是不能訪問響應返回的內(nèi)容，這也是其response type為opaque透明的原因，如下圖：

呃，感覺這樣雖然解決能跨域問題，但是請求不到任何數(shù)據(jù)，還是沒有卵用...

注意： cors 支持 三種content-type 不支持 application/json

application/x-www-form-urlencoded

multipart/form-data

text/plain

body：需要傳遞的參數(shù)

fetch請求默認是不會攜帶cookie信息，如果想要攜帶，需要在手動設(shè)置

fetch(url, {
              method: "POST",
              headers:{
                "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
                },
              credentials: "include" 
            })

credentials: "include" 設(shè)置請求頭攜帶cookie信息

 fetch(url,{
            method:"PUT",
            headers:{
                "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
            },
            body:data
        })
        .then(res=>res.json())
        .then(data=>console.log(data))

 fetch(url,{
            method:"DELETE",
            headers:{
                "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
            },
            body:data
        })
        .then(res=>res.json())
        .then(data=>console.log(data))

其實，post,put,delete,這三個請求代碼上差不多，只是method中對應不同的請求方法不同而已。

const url = "http://jsonplaceholder.typicode.com/users";

let easyHttp = new EasyHttp;

// 請求數(shù)據(jù)
easyHttp.get(url)
        .then(res=>console.log(res))
        .catch(err=>console.log(err))


// 發(fā)送數(shù)據(jù)
const data = {
    name:"Henry",
    username:"露絲",
    email:"lusi@qq.com"
  };
// easyHttp.post(url,data)
//         .then(res=>console.log(res))
//         .catch(err=>console.log(err))


// 修改數(shù)據(jù)
// easyHttp.put(url+"/10",data)
//         .then(res=>console.log(res))
//         .catch(err=>console.log(err))

easyHttp.delete(url+"/2",data)
        .then(res=>console.log(res))
        .catch(err=>console.log(err))  
       

/**
 * fetch 增刪改查 的API封裝
 */

 class EasyHttp{
    //  get 請求
    get(url){
        return new Promise((resolve,reject)=>{
            fetch(url)
                .then(res=>res.json())
                .then(data=>resolve(data))
                .catch(err=>reject(err))
        })
    }

    // post 請求

    post(url,data){
        return new Promise((resolve,reject)=>{
            fetch(url,{
                method:"POST",
                headers:{
                    "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
                },
                body:data
            })
            .then(res=>res.json())
            .then(data=>resolve(data))
            .then(err=>reject(err))
        })
    }


    // put 請求修改數(shù)據(jù)
    put(url,data){
        return new Promise((resolve,reject)=>{
            fetch(url,{
                method:"PUT",
                headers:{
                    "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
                },
                body:data
            })
            .then(res=>res.json())
            .then(data=>resolve(data))
            .then(err=>reject(err))
        })
    }

      // delete 刪除數(shù)據(jù)
      delete(url,data){
        return new Promise((resolve,reject)=>{
            fetch(url,{
                method:"DELETE",
                headers:{
                    "Content-type":"application/json"http:// 設(shè)置請求頭數(shù)據(jù)類型
                },
                body:data
            })
            .then(res=>res.json())
            .then(data=>"刪除數(shù)據(jù)成功。。。")
            .then(err=>reject(err))
        })
    }

 }

源碼地址：戳一下

fetch和XMLHttpRequest相比，主要有以下優(yōu)點:

語法簡潔，更加語義化

基于標準 Promise 實現(xiàn)，支持 async/await

同構(gòu)方便，使用 isomorphic-fetch