摘要：使用它可以讓頁(yè)面請(qǐng)求少量的數(shù)據(jù)，而不用刷新整個(gè)頁(yè)面。基于什么答它基于的是。的庫(kù)答基于上面的原因，各種庫(kù)引用而生，然而最有名的就是的中的。它的一個(gè)優(yōu)勢(shì)異步操作，但的異步操作是基于事件的異步模型，沒(méi)有那么友好。

歡迎訪問(wèn)我的個(gè)人博客：http://www.xiaolongwu.cn

1. Ajax是什么？

答：Ajax是一種可以在瀏覽器和服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP請(qǐng)求）的技術(shù)。使用它可以讓頁(yè)面請(qǐng)求少量的數(shù)據(jù)，而不用刷新整個(gè)頁(yè)面。而傳統(tǒng)的頁(yè)面（不使用Ajax）要刷新部分內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面。

2. Ajax基于什么？

答：它基于的是XMLHttpRequest（XHR）。這是一個(gè)比較粗糙的API，不符合關(guān)注分離的設(shè)計(jì)原則（Separation of Concerns），配置和使用都不是那么友好。

3. Ajax的庫(kù)？

答：基于上面的原因，各種ajax庫(kù)引用而生，然而最有名的就是jQuery的API中的 $.ajax() 。 $.ajax() 它的一個(gè)優(yōu)勢(shì)異步操作，但jQuery的異步操作是基于事件的異步模型，沒(méi)有promise那么友好。

4. fetch產(chǎn)生的背景？

答：綜合上面所講的各種因素，fetch這個(gè)api應(yīng)運(yùn)而生，它和XMLHttpRequest都是瀏覽器window對(duì)象的原生api。但好用歸好用，它存在著一些問(wèn)題（這個(gè)問(wèn)題下面詳講，并講解相對(duì)應(yīng)的解決方案），再加上兼容性問(wèn)題（ie11以下壓根不支持），所以很多開(kāi)發(fā)者使用了axios這個(gè)第三方庫(kù)。

5. 支持promise的庫(kù)（axios）？

答：axios 這個(gè)庫(kù)現(xiàn)在是一個(gè)比較通用的行業(yè)解決方案，axios 流行開(kāi)來(lái)的一個(gè)原因是promise，另一個(gè)原因是基于數(shù)據(jù)操作的庫(kù)的流行（vue.js, angular.js, react.js等），而傳統(tǒng)的jQuery是基于dom操作的庫(kù)。但它也存在著缺陷，就是我們使用前，要保證這個(gè)庫(kù)已經(jīng)被引入。

其實(shí)，就我個(gè)人而言，我還是比較喜歡使用fetch的。在開(kāi)發(fā)中遇到兼容性的問(wèn)題，只需要同構(gòu)fetch即可，而不需要額外的引入一個(gè)庫(kù)。下面就重點(diǎn)說(shuō)一下fetch。

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

url：請(qǐng)求的地址

options： 請(qǐng)求的相關(guān)參數(shù)配置

response：請(qǐng)求返回的對(duì)象

then：正常返回?cái)?shù)據(jù)

catch： 返回異常

請(qǐng)求參數(shù)配置 options 詳情可參考MDN fetch 我在這里就不再贅述

fetch得到數(shù)據(jù)你需要兩個(gè)步驟

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

fetch的使用需要瀏覽器支持promise， fetch的返回值也是一個(gè)promise對(duì)象；

通過(guò)上面的代碼，可以發(fā)現(xiàn)直接打印返回的 Response 對(duì)象中壓根就沒(méi)有數(shù)據(jù)，要想獲取到所需的數(shù)據(jù)，必須經(jīng)一個(gè)中間的方法 response.text() （fetch提供了5中方法），如下：

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

而fetch的封裝庫(kù)axios解決了這個(gè)問(wèn)題，使用起來(lái)就要方便的多，它返回的 Response 對(duì)象中卻有數(shù)據(jù)，在 data 屬性內(nèi)。參考代碼如下：

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

fetch的請(qǐng)求默認(rèn)是不帶 cookie

解決這個(gè)問(wèn)題，需要在 options 中配置 {credentials: "include"}

并非所有的請(qǐng)求錯(cuò)誤都會(huì) reject

也就是說(shuō) catch 方法并不能捕獲所有的錯(cuò)誤，當(dāng)錯(cuò)誤可以用一個(gè)狀態(tài)碼（如：404，500等）的形式表示時(shí)，fetch 返回的 Promise 不會(huì)擁有reject，只有當(dāng)網(wǎng)絡(luò)故障或請(qǐng)求被阻止時(shí) catch 才有效。

解決這個(gè)問(wèn)題，我們可判斷 Response 對(duì)象中的 ok 是否為true，如果不是，用 Promise 手動(dòng)添加一個(gè) reject 即可。參考代碼如下：

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

當(dāng)然，如果是用axios庫(kù)就不需要考慮這個(gè)問(wèn)題，因?yàn)閍xios已經(jīng)為我們封裝好了；

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

如果你還不了解它們，請(qǐng)?zhí)D(zhuǎn)至：用async/await來(lái)處理異步

在實(shí)際中我們會(huì)經(jīng)常遇到異步嵌套的問(wèn)題，比如：

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

上面就是在收到相應(yīng)之后再發(fā)起一個(gè)請(qǐng)求，這樣的代碼是不是看著很難受；

下面我們來(lái)用async和await改一下，感受一下用同步的方式寫(xiě)異步的感覺(jué)：

// 封裝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)
    }
}

// 調(diào)用aa
aa()

看看上面的代碼是不是舒服多了 ，也簡(jiǎn)單多了；

github資源地址：js基礎(chǔ)進(jìn)階--從ajax到fetch的理解

我的CSDN博客地址：https://blog.csdn.net/wxl1555

如果您對(duì)我的博客內(nèi)容有疑惑或質(zhì)疑的地方，請(qǐng)?jiān)谙路皆u(píng)論區(qū)留言，或郵件給我，共同學(xué)習(xí)進(jìn)步。

郵箱：wuxiaolong802@163.com