掌握异步 JavaScript：回调、Promise 和简化的 Async/Await

异步 JavaScript：从回调到 Promise 和 Async/Await

介绍

JavaScript 是一种强大的单线程编程语言，广泛用于 Web 开发。 JavaScript 中的一个常见挑战是处理异步任务，例如从 API 获取数据或执行时间敏感的操作，而不阻塞主线程。随着时间的推移，开发人员已经从使用回调转向使用 Promise，现在使用更优雅的 async/await 语法来管理异步操作。本指南将引导您逐步了解这些概念，从基础知识开始直至高级场景。到最后，您将能够在现实应用程序中自信地使用异步 JavaScript。

---

什么是异步编程？

在 JavaScript 中，从服务器获取数据、读取文件或设置超时等任务可能需要时间才能完成。 JavaScript 允许这些任务异步运行，而不是等待这些任务完成（这会阻止程序其余部分的执行）。这意味着它们的处理独立于主程序流程，允许其他代码立即执行。

---

了解回调：起点

什么是回调？

回调是作为参数传递给另一个函数的函数。当第一个函数完成其操作时，它会执行回调函数以表示完成。

回调示例：了解基础知识

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

说明：

1. fetchData 模拟延迟获取数据。
2. 延时后，执行回调函数（processData），表示数据准备好了。

---

回调地狱：问题所在

使用嵌套回调处理多个异步任务很快就会导致代码不可读且难以维护。

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

这个“厄运金字塔”使得调试和维护代码变得困难。

---

承诺：更好的选择

什么是承诺？

promise 是一个对象，表示现在、将来或永远不可用的值。 Promise 具有三种状态：

• 待处理：初始状态，既不满足也不拒绝。
• 已完成：操作成功完成。
• 已拒绝：操作失败。

Promise 示例：重写回调地狱

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

Promise 的好处

1. 通过链接提高了可读性。
2. 使用 .catch() 进行内置错误处理。
3. 避免深层嵌套的回调。

---

异步/等待：现代优雅

什么是异步/等待？

async/await 是承诺的语法糖，在 ES2017 中引入。它使异步代码看起来是同步的，提高了可读性和可维护性。

Async/Await 示例：简化 Promise

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

它是如何运作的

1. async 关键字：将函数声明为异步。
2. await 关键字：暂停函数执行，直到 Promise 解决或拒绝。

异步/等待的好处

1. 顺序、可读的代码。
2. 使用 try...catch 进行错误处理。
3. 降低回调复杂性。

---

使用 Async/Await 处理现实场景

并行执行：Promise.all

当需要并行执行多个独立的异步任务时：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("Data fetched!");
            resolve("Fetched data");
        }, 1000);
    });
}

function processData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Processing: ${data}`);
            resolve("Processed data");
        }, 1000);
    });
}

function saveData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Saving: ${data}`);
            resolve("Data saved");
        }, 1000);
    });
}

// Chaining Promises
fetchData()
    .then((data) => processData(data))
    .then((processedData) => saveData(processedData))
    .then((finalResult) => console.log(finalResult))
    .catch((error) => console.error("Error:", error));

错误处理：try...catch 与 .catch()

使用异步函数的 try...catch 正确管理错误：

async function handleData() {
    try {
        const fetchedData = await fetchData();
        const processedData = await processData(fetchedData);
        const savedData = await saveData(processedData);
        console.log(savedData);
    } catch (error) {
        console.error("Error:", error);
    }
}

handleData();

---

有关异步 JavaScript 的常见常见问题解答

如果我忘记等待会发生什么？

该函数返回一个承诺而不是解析值。这可能会导致意外行为。

async function fetchAllData() {
    const task1 = fetchData();
    const task2 = fetchData();
    const results = await Promise.all([task1, task2]);
    console.log("All data fetched:", results);
}
fetchAllData();

我可以在没有 Promise 的情况下使用 Async/Await 吗？

不，await 只能与 Promise 一起使用。然而，像 fetch 和 Node.js 的 fs.promises API 这样的库提供了基于原生 Promise 的方法。

我什么时候应该使用回调？

回调对于小型、简单的任务或使用不支持 Promise 的旧 API 时仍然有用。

---

结论

掌握异步 JavaScript 对于任何使用现代 Web 应用程序的开发人员来说都是至关重要的。从回调开始，您可以了解 Promise 和 async/await 如何简化异步代码并提高可读性。谨慎使用回调，利用 Promise 实现更好的错误处理，并拥抱 async/await 以获得干净、直观的代码。有了这些工具，您就可以准备好应对项目中的任何异步挑战。

以上是掌握异步 JavaScript：回调、Promise 和简化的 Async/Await的详细内容。更多信息请关注PHP中文网其他相关文章！