fetch和ajax的比較

簡書訪問地址：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，對於新技術大家還是要積極探索最好。
如有什么寫得不對的地方，歡迎批評指正

閱讀更多：

Fetch
HTTP access control (CORS)
Fetch polyfill