了解 JavaScript 异步编程：回调、Promise 和 Async/Await

JavaScript 的异步特性对于创建用户友好、响应迅速且高效的应用程序至关重要。了解异步编程的基本思想（例如回调、promise 和 async/await）对于成功导航至关重要。本手册将剖析这些想法并研究它们的应用、优点和缺点。

---

异步与同步编程

同步编程:

• 在同步编程中，任务是按顺序执行的。程序会等待任务完成，然后再继续执行下一个任务。
• 这种方法可能会导致效率低下，尤其是在网络请求或文件处理等耗时的操作期间。

同步代码示例:

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

异步编程:

• 异步编程允许任务独立运行，使程序能够在等待某些任务完成的同时继续执行其他操作。
• 这对于从服务器获取数据等任务特别有用，否则等待可能会冻结用户界面。

---

为什么我们需要异步编程？

1. 响应能力：防止 UI 在长时间操作期间变得无响应。
2. 效率：允许同时执行多个操作，优化资源使用。
3. 用户体验：通过确保流畅和不间断的工作流程来增强交互。

---

回调

定义：回调是作为参数传递给另一个函数的函数，在任务完成后执行。

示例：

function fetchData(callback) {
    console.log("Fetching data...");
    setTimeout(() => {
        const data = "Data received"; // Simulate fetched data
        callback(data); // Execute the callback with the data
    }, 2000);
}

fetchData((data) => {
    console.log(data); // Logs after data is fetched
});

说明：

• fetchData 函数使用 setTimeout 模拟延迟。
• 延迟结束后，将使用获取的数据执行回调。

回调问题:

• 回调地狱：当多个异步操作相互依赖时，深度嵌套的回调使代码难以阅读和维护。

---

承诺

定义：Promise 是一个表示异步操作最终完成（或失败）及其结果值的对象。

好处：

• 简化链式异步操作。
• 与回调相比，提供更好的错误处理。

示例：

function fetchData() {
    return new Promise((resolve, reject) => {
        console.log("Fetching data...");
        setTimeout(() => {
            const data = "Data received";
            resolve(data); // Resolve the promise with data
        }, 2000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // Logs after promise is resolved
    })
    .catch(error => {
        console.error(error); // Handles errors
    });

说明：

• Promise 通过链接 .then() 来成功，链接 .catch() 来处理错误，从而提高可读性。
• 它们消除了回调中典型的嵌套结构。

---

异步/等待

定义：Async/await 是构建在 Promise 之上的语法糖，使您能够编写看起来和行为更像同步代码的异步代码。

好处：

• 提高代码可读性和可维护性。
• 更直接地处理异步逻辑。

示例：

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

说明：

• async 关键字表示该函数包含异步代码。
• await 关键字暂停执行，直到 Promise 解析，使代码看起来同步，同时保持非阻塞。

---

要点总结

1. 同步与异步:

   • 同步代码会阻塞执行，直到任务完成。
   • 异步代码允许其他任务同时执行。

2. 回调:

   • 传递用于处理异步结果的函数。
   • 容易陷入具有复杂依赖关系的回调地狱。

3. 承诺：

   • 回调的更干净的替代方案，支持链接和错误处理。

4. 异步/等待:

   • 使异步代码更具可读性和可维护性。

---

通过理解和利用这些策略，您可以开发出有效且易于使用的 JavaScript 应用程序。无论您是管理简单的任务还是创建复杂的工作流程，学习异步编程对于成为熟练的 JavaScript 开发人员至关重要。

关注我：Github Linkedin 线程

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