Vue?Promise如何解決回調地獄問題

本篇內容介紹了“Vue Promise如何解決回調地獄問題”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

問題

首先，什么是回調地獄:

• 層嵌套的問題。

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

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

• 將請求數據的接口設為同步，之后調另一個接口

• 在請求數據接口的成功回調里調另一個接口

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

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

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 利用了三大技術手段來解決回調地獄:

• 回調函數延遲綁定。

• 返回值穿透。

• 錯誤冒泡。

首先來舉個例子:

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

看到沒有，回調函數不是直接聲明的，而是在通過后面的 then 方法傳入的，即延遲傳入。這就是回調函數延遲綁定。

然后我們做以下微調:

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

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

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

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

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

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

兩種技術結合產生了鏈式調用的效果。

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

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
})

這樣前面產生的錯誤會一直向后傳遞，被catch接收到，就不用頻繁地檢查錯誤了。

“Vue Promise如何解決回調地獄問題”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！