$.ajax 、axios和fetch的簡單介紹（附程式碼）

這篇文章帶給大家的內容是關於$.ajax 、axios和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

取得Promsie的狀態，如：isRejected, isResolved

如果使用習慣了jquery的progress方法的，或者使用deffered的一些方法

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

##

以上是$.ajax 、axios和fetch的簡單介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！