$.ajax vs axios vs fetch

• Ajax 是什麼？

答：Ajax是一種能夠在瀏覽器和服務器之間使用異步數據傳輸（HTTP請求）的技術。使用它可讓頁面請求少許的數據，而不用刷新整個頁面。而傳統的頁面（不使用Ajax）要刷新部份內容，必須重載整個網頁頁面。

• Ajax 基於什麼？

答：它基於的是XMLHttpRequest（XHR）。這是一個比較粗糙的API，不符合關注分離的設計原則（Separation of Concerns），配置和使用都不是那麼友好。

• $.ajax 的產生背景？

答：基於上面的緣由，各類ajax庫引用而生，然而最有名的就是jQuery的API中的 $.ajax() 。 $.ajax() 它的一個優點異步操做，但jQuery的異步操做是基於事件的異步模型，沒有promise那麼友好。

• fetch 產生的背景？

答：綜合上面所講的各類因素，fetch這個api應運而生。但好用歸好用，它存在着一些問題（這個問題下面詳講，並講解相對應的解決方案），再加上兼容性問題（ie壓根不支持），因此不少開發者使用了axios這個第三方庫。

• 支持promise的庫（axios）？

答：axios 這個庫如今是一個比較通用的行業解決方案，axios 流行開來的一個緣由是promise，另外一個緣由是基於數據操做的庫的流行（vue.js, angular.js, react.js等），而傳統的jQuery是基於dom操做的庫。但它也存在着缺陷，就是咱們使用前，要保證這個庫已經被引入。

其實，就我我的而言，我仍是比較喜歡使用 fetch 的。在開發中遇到兼容性的問題，只須要同構fetch便可，而不須要額外的引入一個庫。下面就重點說一下fetch。

fetch 的使用

fetch(url, options)
    .then(response => console.log(responese))
    .catch(err => console.log(err))

url：訪問地址
options：經常使用配置參數
response: 請求返回對象

請求參數配置 options 詳情可參考MDN fetch

fetch存在的問題及解決方案

1. 獲得數據你須要兩個步驟

fetch('https://api.github.com/users/lvzhenbang/repos')
    .then(res => {
        console.log(res)
        return res.text()
    }).then(data => {
        console.log(data)
    })

經過上面的代碼，能夠發現直接打印返回的 Response 對象中壓根就沒有數據，要想獲取到所需的數據，必須經一箇中間的方法 response.text() （fetch提供了5中方法）

而反觀 axios 使用起來就要方便的多，它返回的 Response 對象中卻有數據，在 data 屬性內。參考代碼以下：

axios.get('https://api.github.com/users/lvzhenbang/repos')
    .then(res => console.log(res));

固然，這也不算是一個大問題，就是使用略顯麻煩了點。

1. fetch的請求默認是不帶 cookie

解決這個問題，須要在 options 中配置 {credentials: 'include'}

1. 並不是全部的請求錯誤都會 reject

也就是說 catch 方法並不能捕獲全部的錯誤，當錯誤能夠用一個狀態碼（如：404，500等）的形式表示時，fetch 返回的 Promise 不會擁有reject，只有當網絡故障或請求被阻止時 catch 纔有效。

解決這個問題，咱們可判斷 Response 對象中的 ok 是否爲true，若是不是，用 Promise 手動添加一個 reject 便可。參考代碼以下：

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        if (res.ok) {
            return res.text()
        } else {
            return Promise.reject('請求失敗')
        }
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

若是不手動添加 reject 將打印出 undefined，而這並非咱們想要的，固然使用 axios 則不須要考慮這個問題，代碼以下：

axios.get('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => console.log(res))
    .catch(err => console.log(err));

fetch 的優化

因爲 res.text() 方法返回的就是一個 promise ，因此能夠直接調用 .then ；此外爲了保證全部的錯誤都返回一個統一的格式（都返回一個 Promise），上面的代碼能夠優化以下：

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        return res.text()
            .then(data => {
                if (res.ok) {
                    return data
                } elese {
                    return Promise.reject(json)
                }
            })
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

玩過express/koa的同窗，或者對後端有必定了解的同窗都知道，服務器在某些狀況下也會返回一些提示信息，那麼應該如何處理呢？常見的錯誤提示包括一個狀態碼（status）和提示信息（msg），代碼修改以下：

server:

res.status(404).send({
    err: 'not found'
})

client:

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(handleResponse).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

function handleResponse (res) { 
    return Promise.reject(Object.assign({}, res.text(), {
        status: res.status,
        msg: res.statusText
    }))
}

兼容解決方案

以上問題解決並優化fetch的使用後，發現fetch仍是一個不錯的選擇。針對不一樣使用狀況能夠做以下處理：

首先，要引入 es5-shim 解決fetch這個新特性的同構；

其次，要引入 es6-promise 解決promise的兼容問題；

而後，引入 fetch-ie8 解決fech的同構問題；

最後，引入 fetch-jsonp 解決跨域問題。

固然，你也不須要針對性的解決這些問題，GitHub團隊提供了一個polyfill解決方案，你不須要一步步的是實現。只須要兩步：

1. 安裝 fetch package

   npm install whatwg-fetch --save

2. 在使用的模塊引入 fetch

import 'whatwg-fetch'

window.fetch(url, options)

其餘的使用和 fetch 則這個原生的API雷同。

哪些狀況能夠放棄使用fetch

1. 獲取Promsie的狀態，如：isRejected, isResolved
2. 若是使用習慣了jquery的progress方法的，或者使用deffered的一些方法

具體 fetch 實現了哪些與jquery相似的方法可參考whatwg-ftch 或者 fetch-issue

推薦：相關係列文章可關注個人github article