理解 JavaScript 异步编程：回调、Promises 和 Async/Await

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

异步编程与同步编程

**同步编程**：

在同步编程中，任务是按顺序执行的。程序等待一个任务完成后再继续执行下一个任务。

这种方法可能导致效率低下，尤其是在网络请求或文件处理等耗时的操作期间。

**同步代码示例**：

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

**异步编程**：

异步编程允许任务独立运行，使得程序在等待某些任务完成的同时能够继续执行其他操作。

这对于从服务器获取数据等任务特别有用，否则等待可能会冻结用户界面。

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

响应性：防止 UI 在长时间操作过程中变得无响应。

效率：允许同时执行多个操作，优化资源使用。

用户体验：通过确保顺畅、不间断的工作流程来增强交互。

回调

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

**例子**：

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 是在承诺之上构建的语法糖，使您能够编写看起来和行为更像同步代码的异步代码。

**好处**：

提高代码的可读性和可维护性。

更直接地处理异步逻辑。

**例子**：

async function fetchAndLogData() {
    try {
        const data = await fetchData(); // Wait for the promise to resolve
        console.log(data); // Logs after data is fetched
    } catch (error) {
        console.error(error); // Handles errors
    }
}

fetchAndLogData();

**解释**：

async 关键字表示该函数包含异步代码。

await 关键字暂停执行，直到承诺解决，使代码看起来同步但仍然非阻塞。

要点总结

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

回调：传递用于处理异步结果的函数。依赖关系复杂时容易出现回调地狱。

承诺：回调的更清晰的替代品，支持链接和错误处理。

Async/Await：使异步代码更具可读性和可维护性。

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

关注我：Github Linkedin Threads

CLIS.CC

理解 JavaScript 异步编程：回调、Promises 和 Async/Await

异步编程与同步编程

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

回调

承诺

异步/等待

要点总结