問題

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

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

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

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

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

典型的高階函數(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)，也稱回調(diào)地獄。這種代碼的可讀性和可維護(hù)性都是非常差的，因?yàn)榍短椎膶蛹?jí)太多。而且還有一個(gè)嚴(yán)重的問題，就是每次任務(wù)可能會(huì)失敗，需要在回調(diào)里面對(duì)每個(gè)任務(wù)的失敗情況進(jìn)行處理，增加了代碼的混亂程度。

解決方案

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

• 回調(diào)函數(shù)延遲綁定。
• 返回值穿透。
• 錯(cuò)誤冒泡。

首先來舉個(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ù)不是直接聲明的，而是在通過后面的 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)建不同類型的Promise, 然后把返回的 Promise 穿透到外層, 以供后續(xù)的調(diào)用。這里的 x 指的就是內(nèi)部返回的 Promise，然后在 x 后面可以依次完成鏈?zhǔn)秸{(diào)用。

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

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

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

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

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

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

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

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ò)誤了。

到此這篇關(guān)于Vue Promise解決回調(diào)地獄問題實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)Vue Promise回調(diào)地獄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論