ES8 之 async/await 需要注意的几点-JavaScript中文网-JavaScript教程资源分享门户

ES8 中引入了 async/await，这是一种更加简单、可读性更高的异步编程方式。通过 async/await 可以避免回调地狱，让代码更加优雅、易于维护。但是，async/await 也有一些需要注意的地方，本文将详细介绍这些问题，并给出相应的解决方案。

1. async 函数返回值是 Promise 对象

async 函数总是返回一个 Promise 对象。如果函数内部返回一个值，那么该值会被 Promise.resolve() 包装成 Promise 对象。如果函数内部抛出异常，那么该异常会被 Promise.reject() 包装成 Promise 对象。因此，我们需要注意处理 async 函数的返回值。

async function test() {
  return "hello";
}

test().then((value) => {
  console.log(value); // "hello"
});

2. await 只能在 async 函数内部使用

await 关键字只能在 async 函数内部使用。如果在普通函数中使用 await，会导致语法错误。

async function test() {
  const result = await fetch("http://example.com");
  console.log(result);
}

test();

3. await 只能等待 Promise 对象

await 只能等待 Promise 对象，如果传入的不是 Promise 对象，将会自动转化成一个已经 resolve 的 Promise 对象。

async function test() {
  const result = await "hello";
  console.log(result); // "hello"
}

4. 处理错误需要使用 try/catch

async/await 看起来像是同步代码，但实际上它依然是异步的。因此，我们需要使用 try/catch 来处理错误。

// javascriptcn.com 代码示例
async function test() {
  try {
    const result = await fetch("http://example.com");
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

test();

5. 并发执行多个异步任务

async/await 可以让我们更加方便地处理单个异步任务，但是如果需要并发执行多个异步任务，需要使用 Promise.all() 或 Promise.race()。

async function test() {
  const [result1, result2, result3] = await Promise.all([
    fetch("http://example.com/api1"),
    fetch("http://example.com/api2"),
    fetch("http://example.com/api3"),
  ]);
  console.log(result1, result2, result3);
}

总结

async/await 是一种更加简单、易于维护的异步编程方式，但是需要注意处理返回值、只能在 async 函数内部使用 await、只能等待 Promise 对象、处理错误需要使用 try/catch、并发执行多个异步任务需要使用 Promise.all() 或 Promise.race() 等问题。掌握这些要点，可以让我们更加熟练地使用 async/await，提高代码的可读性和可维护性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656ff89ad2f5e1655d886be7