fetch和ajax的比較

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

今天朋友提到這個問題，我忽然發現本身好像也不咋知道怎麼回答，因此須要整理一下。

1、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();
              }
           }
        }
    };
}

 

2、fetch

fetch 是全局量 window 的一個方法，它的主要特色有：
一、第一個參數是URL:
二、第二個是可選參數，能夠控制不一樣配置的 init 對象
三、使用了 JavaScript Promises 來處理結果/回調:

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

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

一、從 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)
  })

二、默認狀況下, fetch在服務端不會發送或接收任何 cookies, 若是站點依賴於維護一個用戶會話，則致使未經認證的請求(要發送 cookies，必須發送憑據頭).
這一點也能夠作一些處理：
若是想要在同域中自動發送cookie,加上 credentials 的 same-origin 選項

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

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

對於CORS請求，使用include值容許將憑據發送到其餘域：

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

4、總結

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

閱讀更多：

Fetch
HTTP access control (CORS)
Fetch polyfill