解析 JavaScript 异步编程：从回调地狱到 Promise 和 Async/Await

在这里插入图片描述

在现代的JavaScript开发中，处理异步任务变得愈发重要，因为它们允许我们在等待I/O、网络请求或定时器等事件时继续执行其他任务，以提高程序的性能和响应能力。本文将介绍JavaScript中异步编程的演变过程，从最初的回调地狱到后来的Promise和Async/Await。

回调地狱

回调地狱是一种异步编程的反模式，它在嵌套的回调函数中处理多个异步任务，导致代码难以阅读和维护。以下是一个简单的回调地狱演示：

function add(a: number, b: number, callback: (res: number) => void): void  {
    setTimeout(() => {
        callback(a + b);
    }, 1000);
}

// 回调地狱示例
add(2, 3, res => {
    console.log('2 + 3 = ', res);
    add(res, 4, res => {
        console.log('2 + 3 + 4 = ', res);
        add(res, 5, res => {
            console.log('2 + 3 + 4 + 5 = ', res);
        });
    });
});

如上所示，每个异步任务的结果都在回调函数中处理，形成了嵌套的结构，使得代码难以理解。

Promise

Promise是一种用于处理异步任务的对象，它代表了一个异步操作的最终完成或失败，并提供了更优雅的解决方案，避免了回调地狱的问题。

async function add2(a: number, b: number): Promise<number>  {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(a + b);
        }, 2000);
    });
}

// Promise链式调用
add2(2, 3)
    .then((res: number )=> {
        console.log('2 + 3 = ', res);
        return add2(res, 4);
    })
    .then((res: number )=>{
        console.log('2 + 3 + 4 = ', res);
        return add2(res, 4);
    })
    .then((res: number) => {
        console.log('result:', res);
    })
    .catch(e => console.error(`ERROR: ${e}`));

通过Promise，我们可以将异步任务按顺序组织在链式调用中，使得代码更具可读性。

Promise的异常捕获

Promise还提供了异常捕获机制，使得我们可以方便地处理异步任务的错误。

add2(2, 3)
    .then((x: number )=> Promise.reject(10))
    .then((x: number )=> add2(x, 6))
    .then((res: number) => console.log(res))
    .catch(e => console.error(`ERROR: ${e}`));

在这个例子中，当第一个Promise返回了一个拒绝状态时，异常会被捕获，而不会继续执行后续的Promise。

Promise的组合

Promise.all和Promise.race是Promise的两个重要方法。Promise.all等待所有Promise都完成，而Promise.race在第一个Promise完成时就终止。

// Promise同时等待后做事情
Promise.all([add2(2, 3), add2(4, 5)]).then(([a , b]) => {
    console.log('result', a, b);
    return mul(a, b);
}).then((res: number) =>
    console.log('result:', res)
);

// Promise谁先做事情就用谁
Promise.race([add2(2, 3), mul(4, 5)]).then((res: number) =>
    console.log('result:', res)
);

这两个方法使我们能够更灵活地组合和控制多个异步任务的执行。

Async/Await

Async/Await是ES2017引入的异步编程语法糖，使得异步代码更加像同步代码一样，进一步提高了可读性。

async function main(): Promise<void> {
    try {
        const result1 = await add2(2, 3);
        console.log('2 + 3 = ', result1);

        const result2 = await add2(result1, 4);
        console.log('2 + 3 + 4 = ', result2);

        const result3 = await add2(result2, 5);
        console.log('2 + 3 + 4 + 5 = ', result3);
    } catch (error) {
        console.error(`ERROR: ${error}`);
    }
}

main();

使用Async/Await，我们可以更清晰地表达异步任务的执行顺序，避免了回调地狱和过多的Promise链。

总的来说，JavaScript异步编程的演进经历了从回调地狱到Promise和最终的Async/Await的过程，这些新的语法和模式为开发者提供了更强大和清晰的工具，使得异步代码更易于编写和维护。希望本文对你理解JavaScript异步编程有所帮助。

JavaScript异步编程的最新进展：从Promise.allSettled到Promise.any

在ES2020和ES2021中，JavaScript引入了一些新的异步编程方法，进一步改善了处理Promise的体验。本文将介绍其中两个方法：Promise.allSettled 和 Promise.any。

`Promise.allSettled`（ES2020）

在ES2020中，JavaScript引入了 Promise.allSettled 方法，它用于处理多个Promise，无论它们是被解决（fulfilled）还是被拒绝（rejected）。

function asyncFunction1(): Promise<string> {
    return new Promise(resolve => setTimeout(() => resolve('Result from asyncFunction1'), 1000));
}

function asyncFunction2(): Promise<number> {
    return new Promise(resolve => setTimeout(() => resolve(42), 500));
}

// 使用 allSettled 扩展方法
const promises = [asyncFunction1(), asyncFunction2()];

Promise.allSettled(promises).then(results => {
    results.forEach(result => {
        if (result.status === 'fulfilled') {
            console.log(`Fulfilled: ${result.value}`);
        } else {
            console.log(`Rejected: ${result.reason}`);
        }
    });
});

Promise.allSettled 返回一个新的Promise，该Promise在所有传入的Promise都已经被解决或被拒绝后才被解决。它返回一个包含每个Promise结果的对象数组，每个对象都包含 status 和 value 或 reason 属性。

这使得我们能够轻松地处理多个Promise的状态，而不必担心其中一个Promise被拒绝而导致整个操作失败。

`Promise.any`（ES2021）

在ES2021中，JavaScript引入了 Promise.any 方法，它用于处理多个Promise，只要其中至少有一个被解决。

function asyncFunction3(): Promise<string> {
    return new Promise(resolve => setTimeout(() => resolve('Result from asyncFunction3'), 1000));
}

function asyncFunction4(): Promise<number> {
    return new Promise((_, reject) => setTimeout(() => reject('Error from asyncFunction4'), 500));
}

// 使用 any 扩展方法
const promises2 = [asyncFunction3(), asyncFunction4()];

Promise.any(promises2)
    .then(result => {
        console.log(`Resolved: ${result}`);
        // 处理至少一个 Promise 被 resolved 的逻辑
    })
    .catch(errors => {
        console.error(`Rejected with all errors: ${errors}`);
        // 处理所有 Promise 都被 rejected 的逻辑
    });