回調地獄，寫出更簡潔的非同步 JavaScript

如果您使用 JavaScript 很長時間，您可能遇到過「回調地獄」——錯綜複雜的嵌套回調使您的程式碼難以閱讀，甚至更難以維護。但好消息是：使用正確的工具和模式，您可以完全避免回調地獄並編寫乾淨、高效的非同步程式碼。讓我們來探討一下如何。

Promise：清理非同步程式碼的第一步

Promise 是一種處理 JavaScript 中非同步操作的更結構化的方式，它們有助於消除深度嵌套的回調。 Promise 允許您使用 .then() 和 .catch() 方法連結操作，而不是將函數作為參數傳遞並嵌套它們。這使程式碼保持線性並且更容易遵循。
範例：

// Callback hell example:
doSomething(function(result) {
    doSomethingElse(result, function(newResult) {
        doThirdThing(newResult, function(finalResult) {
            console.log(finalResult);
        });
    });
});

// Using Promises:
doSomething()
    .then(result => doSomethingElse(result))
    .then(newResult => doThirdThing(newResult))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

在這種基於 Promise 的方法中，每個步驟都以清晰、線性的方式遵循前一個步驟，從而更容易追蹤程式碼流程並在必要時進行偵錯。

非同步/等待：現代解決方案

雖然 Promise 非常適合清理巢狀回調，但在處理多個非同步操作時它們仍然會感覺很麻煩。輸入 async 並等待。這些現代 JavaScript 功能可讓您編寫看起來幾乎像同步程式碼的非同步程式碼，從而提高可讀性和可維護性。
範例：

async function handleAsyncTasks() {
    try {
        const result = await doSomething();
        const newResult = await doSomethingElse(result);
        const finalResult = await doThirdThing(newResult);
        console.log(finalResult);
    } catch (error) {
        console.error('Error:', error);
    }
}

handleAsyncTasks();

使用 async/await，您可以以更直觀的方式處理 Promise，特別是對於習慣編寫同步程式碼的開發人員而言。它消除了 .then() 連結的需要，並使您的程式碼看起來簡單、自上而下。

將大任務分解為小功能

避免回調地獄的另一個強大技術是將大型、複雜的任務分解為更小的、可重用的函數。這種模組化方法不僅提高了可讀性，還使您的程式碼更易於調試和維護。

例如，如果您需要從 API 獲取資料並處理它，您可以將其分解，而不是將所有內容都寫在一個大函數中：

範例：

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    return await response.json();
}

async function processData(data) {
    // Process your data here
    return data.map(item => item.name);
}

async function main() {
    try {
        const data = await fetchData();
        const processedData = await processData(data);
        console.log('Processed Data:', processedData);
    } catch (error) {
        console.error('An error occurred:', error);
    }
}

main();

透過將獲取和處理資料的關注點分離到各自的函數中，您的程式碼將變得更具可讀性和可維護性。

優雅地處理錯誤

非同步程式碼的一個主要挑戰是錯誤處理。在深度嵌套的回調結構中，正確捕獲和處理錯誤可能很棘手。使用 Promises，您可以在操作結束時連結 .catch()。然而，async/await 與 try-catch 區塊結合提供了一種更自然、更易讀的錯誤處理方式。

範例：

async function riskyOperation() {
    try {
        const result = await someAsyncTask();
        console.log('Result:', result);
    } catch (error) {
        console.error('Something went wrong:', error);
    }
}

riskyOperation();

透過這種方式，您可以捕獲非同步程式碼特定部分內的錯誤，保持其清晰且易於管理，並確保沒有錯誤被忽略。

管理多個非同步操作

有時您需要同時管理多個非同步操作。雖然 Promise.all() 很常用，但當一個 Promise 失敗時它會停止執行。在這種情況下，Promise.allSettled() 會派上用場——它等待所有 Promise 解決（解決或拒絕）並返回其結果。

範例：

// Callback hell example:
doSomething(function(result) {
    doSomethingElse(result, function(newResult) {
        doThirdThing(newResult, function(finalResult) {
            console.log(finalResult);
        });
    });
});

// Using Promises:
doSomething()
    .then(result => doSomethingElse(result))
    .then(newResult => doThirdThing(newResult))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

使用 Web Worker 進行繁重的工作

對於 CPU 密集型任務（例如影像處理或資料處理），JavaScript 的單執行緒特性可能會導致應用程式凍結。這就是 Web Workers 的閃光點——它們允許您在背景運行任務而不會阻塞主線程，從而保持 UI 回應。

範例：

async function handleAsyncTasks() {
    try {
        const result = await doSomething();
        const newResult = await doSomethingElse(result);
        const finalResult = await doThirdThing(newResult);
        console.log(finalResult);
    } catch (error) {
        console.error('Error:', error);
    }
}

handleAsyncTasks();

透過將繁重的任務卸載給 Web Workers，您的主執行緒仍然可以自由地處理 UI 互動和其他關鍵功能，確保更流暢的使用者體驗。

考慮到這一切

避免回調地獄並編寫更乾淨的非同步 JavaScript 就是為了讓您的程式碼更具可讀性、可維護性和高效性。無論您是使用 Promises、async/await、模組化程式碼還是利用 Web Workers，目標都是相同的：保持程式碼平坦且有條理。當您這樣做時，您不僅可以使自己免於調試噩夢，而且還可以編寫其他人（甚至未來的您！）會感謝您的程式碼。

---

我的網站：https://Shafayet.zya.me

---

給你的表情包？

以上是回調地獄，寫出更簡潔的非同步 JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！