fetch和ajax的比較-https://www.cnblogs.com/September-9/p/7099975.html

其實fetch是為了簡化AJAX而生的，2者都是訪問資料

簡書訪問地址：http://www.jianshu.com/p/71f756103df8

今天朋友提到這個問題，我突然發現自己好像也不咋知道怎麼回答，所以需要整理一下。

一、Ajax

Ajax的本質是使用XMLHttpRequest物件來請求資料，下面簡單貼下原生js實現：

function ajax(url, fnSucc, fnFaild)
{
    //1.建立Ajax物件
    if(window.XMLHttpRequest){
       var oAjax=new XMLHttpRequest();
    }else{
       var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.連線伺服器（開啟和伺服器的連線）
    oAjax.open('GET', url, true);

    //3.傳送
    oAjax.send();

    //4.接收
    oAjax.onreadystatechange=function (){
       if(oAjax.readyState==4){
           if(oAjax.status==200){
              //alert('成功了：'+oAjax.responseText);
              fnSucc(oAjax.responseText);
           }else{
              //alert('失敗了');
              if(fnFaild){
                  fnFaild();
              }
           }
        }
    };
}

二、fetch

fetch 是全域性量 window 的一個方法，它的主要特點有：
1、第一個引數是URL:
2、第二個是可選引數，可以控制不同配置的 init 物件
3、使用了 JavaScript Promises 來處理結果/回撥:

// 鏈式處理,將非同步變為類似單執行緒的寫法: 高階用法.
fetch('/some/url').then(function(response) {
    return . //... 執行成功, 第1步...
}).then(function(returnedValue) {
    // ... 執行成功, 第2步...
}).catch(function(err) {
    // 中途任何地方出錯...在此處理 :( 
});

三、fetch規範與jQuery.ajax()主要有兩種方式的不同，牢記：

1、從 fetch()返回的 Promise 將不會拒絕HTTP錯誤狀態, 即使響應是一個 HTTP 404 或 500。相反，它會正常解決 (其中ok狀態設定為false), 並且僅在網路故障時或任何阻止請求完成時，它才會拒絕。
可以做簡單的封裝

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

function parseJSON(response) {
  return response.json()
}

fetch('/users')
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
  }).catch(function(error) {
    console.log('request failed', error)
  })

2、預設情況下, fetch在服務端不會發送或接收任何 cookies, 如果站點依賴於維護一個使用者會話，則導致未經認證的請求(要傳送 cookies，必須傳送憑據頭).
這一點也可以做一些處理：
如果想要在同域中自動傳送cookie,加上 credentials 的 same-origin 選項

fetch(url, {
  credentials: ’same-origin'
})

same-origin值使得fetch處理Cookie與XMLHttpRequest類似。 否則，Cookie將不會被髮送，導致這些請求不保留認證會話。

對於CORS請求，使用include值允許將憑據傳送到其他域：

fetch(url, {
  credentials: 'include'
})

四、總結

最後fetch採用了Promise的非同步處理機制，使用比ajax更加簡單，有可能會逐漸代替ajax，對於新技術大家還是要積極探索最好。
如有什麼寫得不對的地方，歡迎批評指正