問題

首先，什么是回調地獄:

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

當一個接口需要依賴另一個接口的請求數(shù)據(jù)時，通常有兩種解決方式

• 將請求數(shù)據(jù)的接口設為同步，之后調另一個接口
• 在請求數(shù)據(jù)接口的成功回調里調另一個接口

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

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

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

回調當中嵌套回調，也稱回調地獄。這種代碼的可讀性和可維護性都是非常差的，因為嵌套的層級太多。而且還有一個嚴重的問題，就是每次任務可能會失敗，需要在回調里面對每個任務的失敗情況進行處理，增加了代碼的混亂程度。

解決方案

Promise 利用了三大技術手段來解決回調地獄:

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

首先來舉個例子:

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)]有，回調函數(shù)不是直接聲明的，而是在通過后面的 then 方法傳入的，即延遲傳入。這就是回調函數(shù)延遲綁定。

然后我們做以下微調:

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

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

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

這兩種技術一起作用便可以將深層的嵌套回調寫成下面的形式:

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

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

兩種技術結合產(chǎn)生了鏈式調用的效果。

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

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

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)生的錯誤會一直向后傳遞，被catch接收到，就不用頻繁地檢查錯誤了。

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

最新評論