面试题：JavaScript函数定义表达式在复杂异步操作中的使用及优化

Question

在处理复杂的异步任务，如多个异步请求并发且需要顺序处理响应的场景下，阐述如何利用JavaScript函数定义表达式来构建一个高效且易于维护的解决方案。请写出具体代码，并说明代码中的函数定义表达式是如何优化异步流程、管理错误处理以及提高代码可读性的。

Answer 1

解决方案思路

1. 使用 Promise 和 async/await：Promise 是 JavaScript 处理异步操作的核心机制，async/await 是基于 Promise 的语法糖，使异步代码看起来更像同步代码，提高可读性。
2. 函数定义表达式：用于定义处理异步任务的函数，使代码结构更清晰，便于维护。

具体代码

// 模拟异步请求函数
function asyncRequest1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Response from request 1');
        }, 1000);
    });
}

function asyncRequest2() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Response from request 2');
        }, 1500);
    });
}

function asyncRequest3() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Response from request 3');
        }, 2000);
    });
}

// 主函数，使用函数定义表达式
const handleAsyncTasks = async () => {
    try {
        const response1 = await asyncRequest1();
        console.log(response1);
        const response2 = await asyncRequest2();
        console.log(response2);
        const response3 = await asyncRequest3();
        console.log(response3);
    } catch (error) {
        console.error('An error occurred:', error);
    }
};

// 调用主函数
handleAsyncTasks();

代码分析

1. 优化异步流程：
   • 使用 async/await 语法，await 关键字会暂停当前 async 函数的执行，直到 Promise 被解决（resolved）或被拒绝（rejected），从而实现顺序处理响应。
   • 每个异步请求都返回一个 Promise，通过 await 依次等待每个请求完成，避免了回调地狱，使异步流程更直观。
2. 管理错误处理：
   • 使用 try...catch 块捕获在异步操作中抛出的错误。如果任何一个 await 的 Promise 被拒绝，catch 块会捕获该错误，统一处理错误，而不会导致整个程序崩溃。
3. 提高代码可读性：
   • handleAsyncTasks 函数使用函数定义表达式，将复杂的异步任务逻辑封装在一个函数内，使得代码结构更清晰。
   • async/await 语法让异步代码看起来像同步代码，开发者可以按照顺序阅读和理解代码，而不需要像传统回调函数那样层层嵌套，大大提高了代码的可读性和可维护性。