理解async和await

news2024/10/5 12:46:18

async 和 await 是 JavaScript 中用于编写异步代码的两个关键字。它们让异步代码的编写更加简洁、易于理解和维护，类似于同步代码的写法。

async

async 用于声明一个函数是异步的。这意味着这个函数在执行时不会阻塞 JavaScript 的主线程，允许其他代码同时运行。async 函数总是会返回一个 Promise 对象，即使函数正常执行并返回一个非 Promise 值，它也会自动被包装在一个 Promise 中。

async function fetchData() {
  // 执行异步操作，例如网络请求
  const data = await someAsyncOperation();
  return data;
}

await

await 用于等待一个 Promise 对象的结果。它只能在 async 函数内部使用。当执行到 await 表达式时，JavaScript 会暂停该 async 函数的执行，直到等待的 Promise 完成（fulfilled）或失败（rejected）。如果 Promise 被解决（resolved），await 表达式的值就是 Promise 的结果值；如果 Promise 被拒绝（rejected），则会抛出一个错误。

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

使用场景

async 和 await 通常用于处理异步操作，如网络请求、文件读写、定时器等。它们让异步代码的逻辑更加清晰，避免了回调函数的嵌套（也称为“回调地狱”）。

注意事项

错误处理：使用 await 时，应该总是在 try...catch 块中进行，以处理可能出现的异常。
性能：虽然 async 和 await 让代码更易读，但它们不会改变异步操作的执行时间。不要错误地认为使用 await 会加快异步操作的速度。
并发执行：如果你需要同时执行多个异步操作，可以使用 Promise.all 来并行处理它们，而不是顺序执行。

Promise.all()方法示例

假设我们有两个异步函数，我们希望并行执行它们：

async function fetchData1() {
  return fetch('https://api.example.com/data1');
}

async function fetchData2() {
  return fetch('https://api.example.com/data2');
}

async function getAllData() {
  try {
    const [response1, response2] = await Promise.all([fetchData1(), fetchData2()]);
    const data1 = await response1.json();
    const data2 = await response2.json();
    console.log(data1, data2);
  } catch (error) {
    console.error('Error in fetching data:', error);
  }
}