面试题答案
一键面试使用Promise优化异步代码结构
- Promise基础:Promise是一个表示异步操作最终完成(或失败)及其结果值的对象。它有三种状态:
pending
(进行中)、fulfilled
(已成功)和rejected
(已失败)。 - 解决回调地狱:通过将异步操作封装成Promise对象,并使用
.then()
方法链式调用,可以避免层层嵌套的回调函数,即回调地狱。
使用async/await优化异步代码结构
- async函数:
async
函数是异步函数,它返回一个Promise对象。如果async
函数返回一个值,Promise 将被 resolve;如果async
函数抛出异常或返回一个被 reject 的 Promise,Promise 将被 reject。 - await关键字:
await
只能在async
函数内部使用,它暂停async
函数的执行,等待一个Promise对象解决(resolved),然后返回该Promise解决的值。
代码示例
假设我们有三个API函数,分别是fetchData1
、fetchData2
、fetchData3
,它们返回Promise对象。
// 模拟从API获取数据的函数
function fetchData1() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data from API 1');
}, 1000);
});
}
function fetchData2() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data from API 2');
}, 1500);
});
}
function fetchData3() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data from API 3');
}, 2000);
});
}
// 使用Promise.all并发获取数据
async function getData() {
try {
const [data1, data2, data3] = await Promise.all([fetchData1(), fetchData2(), fetchData3()]);
const result = data1 + ', ' + data2 + ', ' + data3;
console.log(result);
return result;
} catch (error) {
console.error('Error:', error);
}
}
getData();
在上述代码中:
- 首先定义了三个模拟从API获取数据的函数
fetchData1
、fetchData2
、fetchData3
,它们返回Promise对象,并通过setTimeout
模拟异步操作。 - 然后使用
async
定义了getData
函数,在该函数内部,通过Promise.all
方法并发执行这三个异步操作。Promise.all
接受一个Promise数组作为参数,当所有Promise都被解决(resolved)时,返回一个包含所有解决值的新Promise。 - 使用
await
等待Promise.all
执行完成,并解构赋值获取每个API返回的数据。 - 对获取到的数据进行汇总处理,并打印结果。如果在任何一个Promise被拒绝(rejected),
Promise.all
返回的Promise也会被拒绝,await
会抛出错误,在catch
块中捕获并处理错误。