MST

星途 面试题库

面试题:JavaScript高阶函数与异步编程

在JavaScript异步编程中,如何巧妙地结合高阶函数(如Promise的then、catch等方法也是高阶函数)来处理复杂的异步流程控制,比如实现一个顺序执行多个异步任务且每个任务依赖前一个任务结果的场景,并且要处理可能出现的错误,阐述其核心原理和具体实现方式。
37.8万 热度难度
编程语言JavaScript

知识考点

AI 面试

面试题答案

一键面试

核心原理

  1. Promise链式调用:通过Promise的then方法返回新的Promise,从而形成链式调用。每个then方法接收上一个Promise解决(resolved)的值作为参数,这样就可以实现任务间的数据传递,即每个任务依赖前一个任务的结果。
  2. 错误处理:Promise的catch方法用于捕获链式调用中任何一个Promise被拒绝(rejected)时抛出的错误,统一进行错误处理,避免错误在异步流程中传播导致难以调试。

具体实现方式

function asyncTask1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Task 1 completed');
            resolve('Result of Task 1');
        }, 1000);
    });
}

function asyncTask2(resultFromPrevious) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Task 2 started with result: ${resultFromPrevious}`);
            const newResult = resultFromPrevious + ' -> processed by Task 2';
            console.log('Task 2 completed');
            resolve(newResult);
        }, 1000);
    });
}

function asyncTask3(resultFromPrevious) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Task 3 started with result: ${resultFromPrevious}`);
            const newResult = resultFromPrevious + ' -> processed by Task 3';
            console.log('Task 3 completed');
            resolve(newResult);
        }, 1000);
    });
}

asyncTask1()
   .then(asyncTask2)
   .then(asyncTask3)
   .then(finalResult => {
        console.log(`Final result: ${finalResult}`);
    })
   .catch(error => {
        console.error('An error occurred:', error);
    });

在上述代码中:

  1. asyncTask1asyncTask2asyncTask3 都是返回Promise的异步任务函数。
  2. 通过链式调用 asyncTask1().then(asyncTask2).then(asyncTask3),每个任务按顺序执行,且asyncTask2依赖asyncTask1的结果,asyncTask3依赖asyncTask2的结果。
  3. 最后通过.catch捕获整个异步流程中可能出现的错误。