JavaScript异步编程：理解和使用Promise、Async/Await

JavaScript是一种单线程语言，这意味着它一次只能执行一个任务。然而，在Web开发中，我们经常需要处理异步操作，例如网络请求、定时器、事件监听等。JavaScript提供了多种方式来处理异步编程，包括回调函数、Promise、Async/Await等。

回调函数

回调函数是最基本的异步编程方式。当一个异步任务完成时，它会调用一个回调函数。这种方式的问题是回调地狱，即回调函数嵌套过多，难以理解和维护。

function asyncTask(callback) {
    setTimeout(() => {
        callback('Async task completed');
    }, 1000);
}

asyncTask((result) => {
    console.log(result);
});

 

Promise

Promise是ES6引入的一种异步编程解决方案。它是一个对象，代表了一个异步操作的最终完成（或失败）及其结果值。

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise resolved');
    }, 1000);
});

promise.then((result) => {
    console.log(result);
}).catch((error) => {
    console.log(error);
});

Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。Promise对象的状态一旦改变，就不会再变，任何时候都可以得到这个结果。

 

Async/Await

Async/Await是ES7引入的一种新的异步编程解决方案，它是基于Promise的。Async/Await使得异步代码看起来像同步代码，更易于理解和维护。

async function asyncTask() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Async task completed');
        }, 1000);
    });
}

async function run() {
    let result = await asyncTask();
    console.log(result);
}

run();

Async函数返回一个Promise对象，可以使用then方法添加回调函数。Await表达式会暂停async函数的执行，等待Promise的解决，然后恢复async函数的执行并返回解决值。

 

错误处理

在异步编程中，错误处理是一个重要的问题。Promise提供了catch方法来捕获错误，Async/Await可以使用try/catch来捕获错误。

async function asyncTask() {
    throw new Error('Async task error');
}

async function run() {
    try {
        let result = await asyncTask();
        console.log(result);
    } catch (error) {
        console.log(error);
    }
}

run();

并发和并行

Promise.all和Promise.race可以用来处理并发和并行任务。

let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise 1 resolved');
    }, 1000);
});

let promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise 2 resolved');
    }, 2000);
});

Promise.all([promise1, promise2]).then((results) => {
    console.log(results);
});

Promise.race([promise1, promise2]).then((result) => {
    console.log(result);
});