js中【异步编程】超详细解读，看这一篇就够了

一、JavaScript异步编程概述

JavaScript是一门单线程语言，这意味着它同一时间只能执行一个任务。在现代Web开发中，异步编程变得尤为重要，因为许多任务（如网络请求、文件读取、定时器等）需要大量时间，如果使用同步编程模型，这些任务会阻塞整个线程，导致页面或程序卡顿。为了解决这个问题，JavaScript提供了异步编程模型，让程序在执行这些长时间任务时，可以继续执行其他代码。

JavaScript中有几种常见的异步处理方式：

1. 回调函数（Callback Functions）
2. Promise
3. async/await

为了理解这些技术的运行机制，必须先掌握JavaScript的事件循环（Event Loop）。

二、事件循环（Event Loop）

1. 执行栈与任务队列

JavaScript的执行是基于事件循环机制的，它包含以下几个重要概念：

• 执行栈（Call Stack）：这是JavaScript执行代码的地方，所有的函数调用都会被压入执行栈中，执行完毕后再弹出。
• 任务队列（Task Queue）：当有异步任务（例如网络请求、定时器等）完成时，它们的回调函数会被加入任务队列，等待执行栈为空时再依次执行。

事件循环的工作机制就是不断检查执行栈是否为空，如果为空，就从任务队列中取出任务执行。任务可以分为两类：

• 宏任务（Macro Task）：如setTimeout、setInterval、I/O 操作等。
• 微任务（Micro Task）：如Promise的回调、process.nextTick等。

微任务的优先级高于宏任务。即在每一次事件循环中，执行栈中的任务执行完毕后，会先检查微任务队列，执行所有微任务，再执行下一个宏任务。

2. 事件循环的流程

具体的事件循环流程如下：

1. 检查执行栈（Call Stack），如果有任务，就执行任务。
2. 如果执行栈为空，检查微任务队列（Micro Task Queue），如果有任务，依次执行所有微任务。
3. 如果微任务队列为空，检查宏任务队列（Macro Task Queue），从中取出一个宏任务并执行。
4. 重复以上步骤，直到程序结束。

这就是JavaScript单线程异步执行的核心机制，通过将异步任务的回调推到任务队列中执行，避免阻塞主线程。

三、回调函数（Callback）

1. 基本概念

回调函数是最早的异步处理方式。异步任务完成后，会调用事先传入的函数，从而避免主线程被阻塞。典型的例子是setTimeout和setInterval。

setTimeout(function() {
    console.log('异步任务完成');
}, 1000);

在上述代码中，setTimeout将在1000ms后将回调函数推入任务队列，等待执行栈空闲后再执行。

2. 回调地狱（Callback Hell）

虽然回调函数能处理异步任务，但在多个异步任务的场景下，回调函数会产生所谓的“回调地狱”，代码变得难以维护和理解：

doSomething(function(result1) {
    doSomethingElse(result1, function(result2) {
        doThirdThing(result2, function(result3) {
            console.log('全部任务完成', result3);
        });
    });
});

这种嵌套方式使代码的结构变得非常复杂，阅读和调试都非常困难。为了解决回调地狱的问题，JavaScript引入了Promise。

四、Promise

1. 基本概念

Promise是ES6引入的一种异步编程解决方案，它是一个表示未来某个事件（通常是一个异步操作）的结果的对象。Promise有以下三种状态：

• Pending（等待中）：初始状态，表示Promise还未完成。
• Fulfilled（已完成）：操作成功完成，并有一个值。
• Rejected（已失败）：操作失败，并有一个原因。

Promise的状态一旦从Pending变为Fulfilled或Rejected，就不能再改变。我们可以通过then和catch来处理完成和失败的状态。

2. 创建Promise

我们可以使用new Promise()来创建一个Promise对象。它接受一个函数作为参数，该函数有两个参数resolve和reject，分别表示成功和失败的回调函数。

const promise = new Promise((resolve, reject) => {
    // 异步操作
    let success = true;
    if (success) {
        resolve('操作成功');
    } else {
        reject('操作失败');
    }
});

3. 使用Promise

Promise实例提供了两个主要的方法：

• then()：用于处理Promise的成功情况。
• catch()：用于处理Promise的失败情况。

promise.then(result => {
    console.log(result);  // 输出：操作成功
}).catch(error => {
    console.log(error);  // 当Promise被拒绝时才会执行
});

4. Promise链式调用

Promise的强大之处在于它支持链式调用。每次调用then()方法时，都会返回一个新的Promise，这样我们可以将多个异步操作串联起来，避免回调地狱：

doSomething()//doSomething返回一个Promise对象
    .then(result => doSomethingElse(result))
    .then(result => doThirdThing(result))
    .then(result => console.log('全部任务完成', result))
    .catch(error => console.error('发生错误', error));

5. Promise.all 和 Promise.race

• Promise.all()：接受一个包含多个Promise的数组，并返回一个新的Promise。当所有Promise都完成时，这个Promise才会完成；如果其中有一个Promise失败，Promise.all()会立即失败。

Promise.all([promise1, promise2, promise3])
    .then(results => console.log(results))  // 所有Promise成功时，返回所有结果的数组
    .catch(error => console.error(error));  // 如果有一个Promise失败，立即执行

• Promise.race()：只要数组中的任意一个Promise完成或失败，Promise.race()就会立即完成或失败。

Promise.race([promise1, promise2, promise3])
    .then(result => console.log(result))  // 最快完成的Promise结果
    .catch(error => console.error(error));  // 最快失败的Promise错误

五、async/await

1. 基本概念

async/await是基于Promise的语法糖，是ES2017引入的用于处理异步代码的方式。它使得异步代码看起来像是同步的，提高了代码的可读性和可维护性。

• async：用来声明一个异步函数。async函数会隐式地返回一个Promise。
• await：只能在async函数内部使用，用于等待一个Promise的完成。

2. async函数

一个async函数就是一个返回Promise的函数。例如：

async function foo() {
    return 'Hello, World';
}

foo().then(result => console.log(result));  // 输出：Hello, World

即使函数返回的是一个普通的值，async也会将其包装为一个Promise。

3. await的使用

await用于等待一个Promise的完成，它会暂停当前函数的执行，直到Promise完成，并返回Promise的结果。这样我们就可以以同步的方式写异步代码：

async function fetchData() {
    try {
        let result = await fetch('https://api.example.com/data');
        let data = await result.json();
        console.log(data);
    } catch (error) {
        console.error('发生错误', error);
    }
}

上面的代码实现了异步的API调用，但写法上类似于同步代码，这极大地提高了代码的可读性。

4. 错误处理

在async函数中，可以使用try...catch来捕获异步操作中的错误，而不需要使用catch()：

async function foo() {
    try {
        let result = await someAsyncFunction();
        console.log(result);
    } catch (error) {
        console.error('发生错误', error);
    }
}

这样，错误处理变得更加直观和一致。

5. 并发操作

虽然await使异步操作看起来像是同步的，但它并不会让多个异步操作并行执行。如果你希望同时发起多个异步操作，可以使用Promise.all()来并发处理：

async function fetchDataConcurrently() {
    let [result1, result2] = await Promise.all([fetch(url1), fetch(url2)]);
    console.log(result1, result2);
}

这样两个fetch请求会同时进行，而不是一个完成后才开始另一个。

六、总结

JavaScript异步编程模型是基于事件循环的，通过Callback、Promise、async/await等不同方式，能够有效地处理异步操作。Promise引入了链式调用，解决了回调地狱的问题，而async/await则进一步简化了异步代码的书写，使其更加直观和易于理解。理解事件循环、任务队列、微任务和宏任务的运行机制，是深入掌握JavaScript异步编程的关键。