js基礎進階–從ajax到fetch的理解

LeonWuV發表於2019-02-16
JS

歡迎訪問我的個人部落格：http://www.xiaolongwu.cn

基本知識

1. Ajax是什麼？

答：Ajax是一種可以在瀏覽器和伺服器之間使用非同步資料傳輸（HTTP請求）的技術。使用它可以讓頁面請求少量的資料，而不用重新整理整個頁面。而傳統的頁面（不使用Ajax）要重新整理部分內容，必須過載整個網頁頁面。

2. Ajax基於什麼？

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

3. Ajax的庫？

答：基於上面的原因，各種ajax庫引用而生，然而最有名的就是jQuery的API中的 $.ajax() 。 $.ajax() 它的一個優勢非同步操作，但jQuery的非同步操作是基於事件的非同步模型，沒有promise那麼友好。

4. fetch產生的背景？

答：綜合上面所講的各種因素，fetch這個api應運而生，它和XMLHttpRequest都是瀏覽器window物件的原生api。但好用歸好用，它存在著一些問題（這個問題下面詳講，並講解相對應的解決方案），再加上相容性問題（ie11以下壓根不支援），所以很多開發者使用了axios這個第三方庫。

5. 支援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：請求返回的物件

then：正常返回資料

catch： 返回異常

請求引數配置 options 詳情可參考MDN fetch 我在這裡就不再贅述

fetch存在的問題及解決方案

  1. fetch得到資料你需要兩個步驟
fetch(`https://api.github.com/users`)
    .then(res => {
        console.log(res)
        return res.text()
    })
    .then(data => {
        console.log(data)
    })

fetch的使用需要瀏覽器支援promise， fetch的返回值也是一個promise物件；

通過上面的程式碼，可以發現直接列印返回的 Response 物件中壓根就沒有資料，要想獲取到所需的資料，必須經一箇中間的方法 response.text() （fetch提供了5中方法），如下：

// 具體功能請自行查閱
arrayBuffer()
blob()
json()
text()
formData()

而fetch的封裝庫axios解決了這個問題，使用起來就要方便的多，它返回的 Response 物件中卻有資料，在 data 屬性內。參考程式碼如下：

axios.get(`https://api.github.com/users`)
    .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`)
    .then(res => {
        if (res.ok) {
            return res.text()
        } else {
            return Promise.reject(`請求失敗`)
        }
    })
    .then(data => {
        console.log(data)
    })
    .catch(err => {
        console.log(err)
    })

當然，如果是用axios庫就不需要考慮這個問題，因為axios已經為我們封裝好了；

fetch和async、await在實際中一起使用

async和await是es7的api，在實際開發中加入一些polyfill庫，比如最流行的的babel，我們就可以使用它們了；

如果你還不瞭解它們，請跳轉至：用async/await來處理非同步

在實際中我們會經常遇到非同步巢狀的問題，比如：

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

上面就是在收到相應之後再發起一個請求，這樣的程式碼是不是看著很難受；

下面我們來用async和await改一下，感受一下用同步的方式寫非同步的感覺：

// 封裝aa
async function aa() {
    try {
        let res = await fetch(`https://api.github.com/usrs`)
        let data = await res.text()
        let url = data.url
        let res1 = await fetch(url)
        let data1 = await res1.text()
        console.log(data)
    } catch(e) {
        console.log("error", e)
    }
}

// 呼叫aa
aa()

看看上面的程式碼是不是舒服多了 ，也簡單多了；

github資源地址：js基礎進階–從ajax到fetch的理解

我的CSDN部落格地址：https://blog.csdn.net/wxl1555

如果您對我的部落格內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

郵箱：wuxiaolong802@163.com

相關文章