前端 JavaScript 进阶面试题, asyncawait 如何捕获异常?

QA

Step 1

Q:: async/await 如何捕获异常？

A:: 在使用 async/await 时，异常可以通过 try/catch 语句来捕获。示例如下：

 
async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
fetchData();

在这个例子中，任何在 await 表达式中抛出的异常都会被 catch 块捕获。

Step 2

Q:: 为什么 async/await 比回调函数和 Promise 更好？

A:: async/await 比回调函数和 Promise 更好主要有以下几个原因： 1. 可读性强：async/await 让代码看起来更像同步代码，使得逻辑更容易理解。 2. 错误处理更简单：可以使用 try/catch 捕获异常，而不需要链式的 .catch() 方法。 3. 调试方便：调试器可以逐行调试 async 函数，像同步代码一样设置断点。

Step 3

Q:: 你如何处理多个 async/await 请求？

A:: 可以使用 Promise.all 并行处理多个 async/await 请求：

 
async function fetchMultipleData() {
  try {
    let [data1, data2] = await Promise.all([
      fetch('https://api.example.com/data1').then(res => res.json()),
      fetch('https://api.example.com/data2').then(res => res.json())
    ]);
    console.log(data1, data2);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
fetchMultipleData();

在这个例子中，两个异步请求并行执行，只有当两个请求都完成时才继续执行后续代码。

用途

了解和掌握 async`/await 是前端开发中的重要技能，特别是在处理异步操作时。它们简化了异步代码的写法，提高了代码的可读性和可维护性。实际生产环境中，async/`await 常用于数据请求、文件读取和定时任务等需要异步处理的场景。\n

相关问题

🦆

什么是 JavaScript 异步编程?▷

JavaScript 异步编程是一种处理异步操作的编程方式，常见的方法包括回调函数、Promise 和 async/await。异步编程允许代码在等待某些操作完成时继续执行，从而提高性能和响应速度。

🦆

解释 Promise 的工作原理.▷

Promise 是一个表示异步操作最终完成或失败的对象。它有三个状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise 提供了 then() 和 catch() 方法来处理成功和失败的回调。

 
let promise = new Promise((resolve, reject) => {
  // 异步操作
  if (成功) {
    resolve('Success');
  } else {
    reject('Error');
  }
});
 
promise.then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});

🦆

回调地狱是什么,如何避免?▷

回调地狱是指多层嵌套的回调函数，使代码难以阅读和维护。可以通过以下几种方法避免回调地狱： 1. 使用 Promise：将嵌套的回调转换为链式调用。 2. 使用 async/await：进一步简化异步代码的写法。 3. 模块化：将回调函数拆分为多个单独的函数。

 
// 回调地狱示例
fs.readFile('/file1', 'utf-8', (err, data1) => {
  if (err) throw err;
  fs.readFile('/file2', 'utf-8', (err, data2) => {
    if (err) throw err;
    fs.readFile('/file3', 'utf-8', (err, data3) => {
      if (err) throw err;
      console.log(data1, data2, data3);
    });
  });
});
 
// 使用 Promise
readFilePromise('/file1').then(data1 => {
  return readFilePromise('/file2');
}).then(data2 => {
  return readFilePromise('/file3');
}).then(data3 => {
  console.log(data1, data2, data3);
}).catch(err => {
  console.error(err);
});
 
// 使用 async/await
async function readFiles() {
  try {
    let data1 = await readFilePromise('/file1');
    let data2 = await readFilePromise('/file2');
    let data3 = await readFilePromise('/file3');
    console.log(data1, data2, data3);
  } catch (err) {
    console.error(err);
  }
}
readFiles();

什么是 JavaScript 的尾调用使用尾调用有什么好处 await 到底在等待什么