回调地狱，编写更简洁的异步 JavaScript-js教程-PHP中文网

如果您使用 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

给你的表情包？

The Callback Hell, Writing Cleaner Asynchronous JavaScript