面试题答案
一键面试优化思路
- 使用 Promise:将每个异步 API 调用封装成返回 Promise 的函数。这样可以利用 Promise 的链式调用特性,避免回调地狱。通过
Promise.all
方法并行执行多个 API 调用,然后在所有调用完成后进行数据合并和处理。 - 使用 Async/Await:它是基于 Promise 构建的更简洁的异步处理语法糖。将每个异步操作封装在
async
函数内,使用await
等待 Promise 解决,使得异步代码看起来像同步代码,极大提高可读性。同样可以使用Promise.all
并行处理多个 API 调用。
使用 Promise 优化示例代码
假设我们有两个 API 调用函数 apiCall1
和 apiCall2
,它们原本使用回调,现在封装成返回 Promise:
function apiCall1() {
return new Promise((resolve, reject) => {
// 模拟异步 API 调用
setTimeout(() => {
resolve('Data from API 1');
}, 1000);
});
}
function apiCall2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data from API 2');
}, 1500);
});
}
Promise.all([apiCall1(), apiCall2()])
.then(([data1, data2]) => {
// 合并和处理数据
const combinedData = data1 + ' ' + data2;
console.log(combinedData);
})
.catch(error => {
console.error('Error:', error);
});
使用 Async/Await 优化示例代码
async function apiCall1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data from API 1');
}, 1000);
});
}
async function apiCall2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data from API 2');
}, 1500);
});
}
async function main() {
try {
const [data1, data2] = await Promise.all([apiCall1(), apiCall2()]);
const combinedData = data1 + ' ' + data2;
console.log(combinedData);
} catch (error) {
console.error('Error:', error);
}
}
main();
性能提升
- 并行执行:使用
Promise.all
可以并行发起多个 API 调用,而不是等待前一个调用完成才开始下一个。这减少了整体的执行时间,尤其是当 API 调用时间较长时。 - 错误处理:Promise 和 Async/Await 提供了更优雅的错误处理机制。在链式调用或
try...catch
块中可以统一捕获错误,而在嵌套回调中错误处理往往比较复杂且容易遗漏。 - 代码可维护性:优化后的代码结构更清晰,易于理解和修改,间接提高开发效率,在长期维护中也能减少潜在的性能问题。