Promise与async await的作用及应用场景

news2025/1/19 19:21:18

在Web前端开发中，处理异步操作是非常常见的需求。为了解决这个问题，ES6引入了Promise和后续的async await。本文将介绍Promise和async await的作用，以及在实际开发中的应用场景。

一、Promise的作用及应用场景

Promise是一个表示异步操作最终完成或失败的对象。它可以将回调地狱转化为链式调用，使代码更加整洁和可读。Promise具有以下几个核心方法：

1.1 resolve()
resolve方法用于将Promise对象从未完成状态转为成功状态（即从pending变为fulfilled）。它接受一个参数，该参数就是成功后的结果值。例如：

const promise = new Promise((resolve, reject) => {
   resolve('成功');
});

promise.then((result) => {
    console.log(result); // 输出：成功
});

1.2 reject()
reject方法用于将Promise对象从未完成状态转为失败状态（即从pending变为rejected）。它接受一个参数，该参数就是失败后的错误信息。例如：

const promise = new Promise((resolve, reject) => {
   reject('失败');
});

promise.catch((error) => {
    console.error(error); // 输出：失败
});

1.3 then()
then方法用于添加成功后的回调函数。它接受两个参数，第一个参数是成功后的处理函数，第二个参数是失败后的处理函数。例如：

const promise = new Promise((resolve, reject) => {
   resolve('成功');
});

promise.then((result) => {
    console.log(result); // 输出：成功
}, (error) => {
    console.error(error);
});

1.4 catch()
catch方法用于添加失败后的回调函数。它与then方法的第二个参数作用相同。例如：

const promise = new Promise((resolve, reject) => {
   reject('失败');
});

promise.catch((error) => {
    console.error(error); // 输出：失败
});

Promise的应用场景非常广泛，下面以一个简单的异步获取数据的例子来说明：

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = '这是异步获取的数据';
            resolve(data);
        }, 1000);
    });
};

fetchData().then((data) => {
    console.log(data); // 输出：这是异步获取的数据
});

二、async await的作用及应用场景

async await是ES2017引入的新特性，可以更简洁地处理异步操作。async函数返回一个Promise对象，可以通过await关键字来暂停函数的执行，等待Promise对象的状态变为resolved后继续执行。

2.1 async
async关键字用于定义一个异步函数。异步函数可以包含await关键字，以便在需要等待异步操作结果时暂停函数的执行。例如：

async function fetchData() {
    return '这是异步获取的数据';
}

fetchData().then((data) => {
    console.log(data); // 输出：这是异步获取的数据
});

2.2 await
await关键字用于暂停异步函数的执行，等待Promise对象的状态变为resolved后继续执行。注意，await只能在异步函数（即用async关键字定义的函数）中使用。例如：

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = '这是异步获取的数据';
            resolve(data);
        }, 1000);
    });
};

async function getData() {
    const data = await fetchData();
    console.log(data); // 输出：这是异步获取的数据
}

getData();