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

在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();

async await的应用场景通常是在需要按顺序执行多个异步操作的情况下，提高代码的可读性和可维护性。

三、Promise与async await的对比

Promise和async await都是处理异步操作的方式，它们各有优劣。下面是它们的对比：

3.1 可读性
Promise的链式调用相对于回调地狱来说已经很大的提高了可读性，但是对于多个异步操作的情况下，仍然需要嵌套多个then方法，可能会导致代码结构不够清晰。而async await则通过使用async关键字定义异步函数和await关键字暂停函数的执行，使代码更加简洁明了。

3.2 错误处理
Promise使用catch方法来统一处理异步操作中的错误，而async await则可以使用try catch语句来捕获错误并进行处理。这使得错误处理更加灵活，也更容易定位错误。

3.3 兼容性
Promise是ES6中引入的新特性，在较老的浏览器中可能不被完全支持。而async await是ES2017中引入的特性，对于一些较老的浏览器需要使用babel等工具进行转译，以保证兼容性。

综上所述，Promise和async await都是处理异步操作的有效方式。选择合适的方式取决于具体的应用场景和个人习惯。在实际开发中，可以根据项目需求灵活选择使用Promise还是async await来提高开发效率和代码可读性。

更多面试题请点击 web前端高频面试题_在线视频教程-CSDN程序员研修院

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。