异步 JavaScript 是如何工作的？ - Javascript

引言

在 JavaScript 编程中，异步任务是很常见的。JavaScript 是单线程语言，这意味着只能同时执行一个任务。这会导致在某些情况下，如网络请求或 DOM 操作等耗时操作中的阻塞。为了解决这个问题，JavaScript 使用异步编程模型。

异步编程模型通过将任务的执行推迟到将来，在任务执行期间允许执行其他任务。这样程序就能更加高效地利用 CPU 资源。异步编程的核心思想是使用回调函数。

回调函数

回调函数是一个被传递给另一个函数的函数，以便在主函数执行完成后执行。回调函数可以在异步任务完成后被调用以通知主函数，或在主函数执行期间进行额外的处理。

以下是一个简单的回调函数示例：

function callback() {
    console.log('The operation is complete!');
}

function performAction(callback) {
    console.log('Performing action...');
    setTimeout(callback, 2000);
}

performAction(callback);

在此示例中，performAction 函数是一个异步函数，它会等待 2 秒钟后执行回调函数。callback 函数是一个简单的输出语句，用于指示操作已完成。

Promise

回调函数存在一些问题，如回调地狱（Callback Hell），可读性差等。为了解决这些问题，JavaScript 引入了 Promise。Promise 是一种包装异步操作并提供关于操作成功或失败的信息的对象。

以下是一个使用 Promise 的示例：

function performAction() {
    return new Promise(function(resolve, reject) {
        console.log('Performing action...');
        setTimeout(function() {
            if (Math.random() < 0.5) {
                resolve('Operation complete!');
            } else {
                reject(new Error('Operation failed!'));
            }
        }, 2000);
    });
}

performAction().then(function(message) {
    console.log(message);
}).catch(function(error) {
    console.error(error);
});

在此示例中，performAction 函数返回一个 Promise。Promise 是通过传递两个参数 resolve 和 reject 来创建的。当异步操作成功时，会调用 resolve；当异步操作失败时，会调用 reject。

performAction 函数使用 setTimeout 模拟异步操作，并通过 Math.random() 方法随机确定操作是否成功。如果成功，resolve 方法将返回一个字符串 “Operation complete!”；如果失败，则抛出一个新的 Error 对象。

当 Promise 成功时，调用 then 方法，并传递一个处理成功情况的回调函数。如果 Promise 失败了，则调用 catch 方法，并传递一个处理失败情况的回调函数。

async/await

async/await 是一种异步编程模型，它是 Promise 模式的一种简化写法。在 async 函数中，我们可以使用 await 操作符等待 Promise 的返回值。当 Promise 返回时，await 操作符将返回 Promise 的解决值。

以下是一个使用 async/await 的示例：

function performAction() {
    return new Promise(function(resolve, reject) {
        console.log('Performing action...');
        setTimeout(function() {
            if (Math.random() < 0.5) {
                resolve('Operation complete!');
            } else {
                reject(new Error('Operation failed!'));
            }
        }, 2000);
    });
}

async function main() {
    try {
        const message = await performAction();
        console.log(message);
    } catch (error) {
        console.error(error);
    }
}

main();

在此示例中，main 函数使用 async 声明。该函数可以使用 await 操作符等待 Promise 的返回值。在函数执行期间，执行将会暂停，直到 Promise 完成或拒绝。当 Promise 解决时，将返回解决的值。

main 函数使用 try/catch 块处理 Promise 的结果。如果 Promise 被解决，则 message 将包含返回的值；如果 Promise 被拒绝，则 error 将包含错误对象。

结论

异步编程是 JavaScript 编程中的重要主题，它为开发人员提供了一种强大的方式，可以使程序更加有效地利用 CPU 资源。回调函数、Promise 和 async/await 是实现异步编程的常见方法。了解这些概念将使您成为一位更加出色的 JavaScript 开发人员。