JavaScript中的Promise和async/await

翻滚的胖子
2023-06-16 15:06:09
JavaScript Java

在JavaScript中，经常会遇到一些需要异步处理的场景，例如读取文件、发送网络请求等。在传统的回调函数中，存在回调地狱的问题，导致代码难以维护。因此，JavaScript引入了Promise和async/await来解决这个问题。

Promise

Promise是一种异步编程的解决方案，它是ES6中新增加的一个语法特性。Promise是一个对象，用于异步操作的最终完成或失败，并返回一个包含异步操作结果的值。

Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦Promise状态变为fulfilled或rejected，就称为resolved（已解决）。

Promise语法

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

其中，resolve和reject都是函数。resolve用于将Promise状态从pending变为fulfilled，并将异步操作的结果传递给then方法；reject用于将Promise状态从pending变为rejected，并将错误信息传递给catch方法。

Promise使用

Promise对象有两个重要的方法：then和catch。then方法用于处理fulfilled状态的Promise，catch方法用于处理rejected状态的Promise。

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

在then方法中，可以接收resolve函数传递过来的异步操作结果；在catch方法中，可以接收reject函数传递过来的错误信息。

async/await

async/await是ES8中新增加的异步编程语法，它是Promise的语法糖。使用async/await可以让异步代码看起来就像同步代码一样，更加易于理解和维护。

async/await语法

async function asyncFunc() {
    try {
        const result = await promise;
        console.log(result);
    } catch (error) {
        console.log(error);
    }
}

其中，async用于声明一个异步函数，await用于等待异步操作完成，并返回异步操作结果。在使用await时，需要将其放在async函数内部。

async/await使用

async function asyncDemo() {
    try {
        const result1 = await promise1;
        const result2 = await promise2;
        const result3 = await promise3;
        console.log(result1, result2, result3);
    } catch (error) {
        console.log(error);
    }
}

在async函数中，可以使用多个await等待多个异步操作完成，并将结果传递给下一个await。如果其中有一个异步操作失败，整个async函数就会停止执行，并抛出错误信息。