Vue?Promise如何解決回調(diào)地獄問(wèn)題

本篇內(nèi)容介紹了“Vue Promise如何解決回調(diào)地獄問(wèn)題”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

問(wèn)題

首先，什么是回調(diào)地獄:

• 層嵌套的問(wèn)題。

• 每種任務(wù)的處理結(jié)果存在兩種可能性（成功或失敗），那么需要在每種任務(wù)執(zhí)行結(jié)束后分別處理這兩種可能性。

當(dāng)一個(gè)接口需要依賴(lài)另一個(gè)接口的請(qǐng)求數(shù)據(jù)時(shí)，通常有兩種解決方式

• 將請(qǐng)求數(shù)據(jù)的接口設(shè)為同步，之后調(diào)另一個(gè)接口

• 在請(qǐng)求數(shù)據(jù)接口的成功回調(diào)里調(diào)另一個(gè)接口

這兩種問(wèn)題在回調(diào)函數(shù)時(shí)代尤為突出。Promise 的誕生就是為了解決這兩個(gè)問(wèn)題。

典型的高階函數(shù)，將回調(diào)函數(shù)作為函數(shù)參數(shù)傳給了readFile。但久而久之，就會(huì)發(fā)現(xiàn)，這種傳入回調(diào)的方式也存在大坑, 比如下面這樣:

fs.readFile('1.json', (err, data) => {
    fs.readFile('2.json', (err, data) => {
        fs.readFile('3.json', (err, data) => {
            fs.readFile('4.json', (err, data) => {
            });
        });
    });
});

回調(diào)當(dāng)中嵌套回調(diào)，也稱(chēng)回調(diào)地獄。這種代碼的可讀性和可維護(hù)性都是非常差的，因?yàn)榍短椎膶蛹?jí)太多。而且還有一個(gè)嚴(yán)重的問(wèn)題，就是每次任務(wù)可能會(huì)失敗，需要在回調(diào)里面對(duì)每個(gè)任務(wù)的失敗情況進(jìn)行處理，增加了代碼的混亂程度。

解決方案

Promise 利用了三大技術(shù)手段來(lái)解決回調(diào)地獄:

• 回調(diào)函數(shù)延遲綁定。

• 返回值穿透。

• 錯(cuò)誤冒泡。

首先來(lái)舉個(gè)例子:

let readFilePromise = (filename) => {
    fs.readFile(filename, (err, data) => {
        if(err) {
            reject(err);
        }else {
            resolve(data);
        }
    })
}
readFilePromise('1.json').then(data => {
    return readFilePromise('2.json')
});

看到?jīng)]有，回調(diào)函數(shù)不是直接聲明的，而是在通過(guò)后面的 then 方法傳入的，即延遲傳入。這就是回調(diào)函數(shù)延遲綁定。

然后我們做以下微調(diào):

let x = readFilePromise('1.json').then(data => {
    return readFilePromise('2.json')//這是返回的Promise
});
x.then(/* 內(nèi)部邏輯省略 */)

我們會(huì)根據(jù) then 中回調(diào)函數(shù)的傳入值創(chuàng)建不同類(lèi)型的Promise, 然后把返回的 Promise 穿透到外層, 以供后續(xù)的調(diào)用。這里的 x 指的就是內(nèi)部返回的 Promise，然后在 x 后面可以依次完成鏈?zhǔn)秸{(diào)用。

這便是返回值穿透的效果。

這兩種技術(shù)一起作用便可以將深層的嵌套回調(diào)寫(xiě)成下面的形式:

readFilePromise('1.json').then(data => {
    return readFilePromise('2.json');
}).then(data => {
    return readFilePromise('3.json');
}).then(data => {
    return readFilePromise('4.json');
});

這樣就顯得清爽了許多，更重要的是，它更符合人的線性思維模式，開(kāi)發(fā)體驗(yàn)也更好。

兩種技術(shù)結(jié)合產(chǎn)生了鏈?zhǔn)秸{(diào)用的效果。

這解決的是多層嵌套的問(wèn)題，那另一個(gè)問(wèn)題，即每次任務(wù)執(zhí)行結(jié)束后分別處理成功和失敗的情況怎么解決的呢？

Promise采用了錯(cuò)誤冒泡的方式。其實(shí)很簡(jiǎn)單理解，我們來(lái)看看效果:

readFilePromise('1.json').then(data => {
    return readFilePromise('2.json');
}).then(data => {
    return readFilePromise('3.json');
}).then(data => {
    return readFilePromise('4.json');
}).catch(err => {
  // xxx
})

這樣前面產(chǎn)生的錯(cuò)誤會(huì)一直向后傳遞，被catch接收到，就不用頻繁地檢查錯(cuò)誤了。

“Vue Promise如何解決回調(diào)地獄問(wèn)題”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！