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程序员研修院
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。
