面试题：JavaScript 中 async/await 与 Promise 的错误处理差异及应用场景

错误处理的不同

Promise：
- 使用.catch()方法来捕获整个Promise链中的错误。无论Promise链中有多少个.then()，只要其中一个Promise被拒绝，.catch()就会捕获到这个错误。
- 例如：

Promise.reject('Promise error')
  .then(() => {
      // 这里不会执行
  })
  .catch(error => {
      console.log('Caught in Promise:', error); // 输出：Caught in Promise: Promise error
  });

async/await：
- 使用try...catch块来捕获错误。await只能捕获其后面的Promise被拒绝时的错误，如果在async函数中有多个await，每个await都需要在try...catch块内，或者在async函数外层统一捕获。
- 例如：

async function asyncFunc() {
    try {
        await Promise.reject('async/await error');
    } catch (error) {
        console.log('Caught in async/await:', error); // 输出：Caught in async/await: async/await error
    }
}
asyncFunc();

适用场景

适合async/await错误处理方式的场景：
- 顺序执行且需精确捕获错误的场景：当需要按顺序执行多个异步操作，并且希望对每个异步操作的错误进行精确处理时，async/await更合适。比如在用户注册流程中，首先验证用户名是否存在，然后创建用户，如果验证用户名存在失败，创建用户操作就不应执行，并且要精确捕获验证用户名存在的错误。

async function registerUser(username, password) {
    try {
        const isExist = await checkUsernameExist(username);
        if (isExist) {
            throw new Error('Username already exists');
        }
        await createUser(username, password);
        console.log('User registered successfully');
    } catch (error) {
        console.log('Registration error:', error.message);
    }
}

适合Promise错误处理方式的场景：
- 链式调用且统一处理错误的场景：当有一系列异步操作以链式调用的方式执行，并且可以统一处理整个链条上的错误时，使用Promise的.catch()更方便。例如在加载一系列图片资源时，只要有一个图片加载失败，就统一提示图片加载失败。

function loadImage(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = resolve;
        img.onerror = reject;
        img.src = url;
    });
}

Promise.all([loadImage('img1.jpg'), loadImage('img2.jpg'), loadImage('img3.jpg')])
  .then(() => {
      console.log('All images loaded successfully');
  })
  .catch(error => {
      console.log('Image load error:', error);
  });

星途面试题库

面试题：JavaScript 中 async/await 与 Promise 的错误处理差异及应用场景

知识考点

面试题答案

错误处理的不同

适用场景