前端（十二）——深入理解和使用 async和await-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端（十二）——深入理解和使用 async和await。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端（十二）——深入理解和使用 async和await,前端,前端,javascript,开发语言

😛博主：小猫娃来啦
😛文章核心：深入理解和使用 async和await

在 JS中，异步操作是无法避免的，而处理异步操作最常用的方法是使用回调函数或者 Promise。然而，自 ES2017 引入了 async/await 之后，我们可以通过更简洁、可读性更好的方式来处理异步代码。本文将从浅层次到深层次，介绍 async/await 的理解和使用。

你可能遇到的问题

声明一个变量，用axios请求后，把请求结果中的数据给这个变量。然后去使用这个变量，发现这个变量里是空的。但是当把这个这串代码放在定时器里几秒后，就能打印到。但如果网络不好，请求花的时间更多，那么你还是打印不到。你遇到过这个情况吗？如何拿到值呢？或者如何等到接口请求完，再去向下执行？

这边牵扯到一个同步和异步的问题，那么axios是异步的非阻塞模式。如何将axios请求由异步变为同步，这就需要async与await配合使用。

做到这一点，你才能保证必须让程序按照从上到下的顺序执行，你也就能拿到值了。

async function init() {
  let salesData = [];
  
  const res = await axios({
    method: "post",
    url: "要请求的接口",
    data: {}
  });

}
 console.log(res.data.data);
 salesData = res.data.data;

如果你着急解决问题，那么上面的代码示例就已经帮你解决了问题。如果你有时间，要深入了解，那么请往下看：

什么是 async/await

async/await 是基于 Promise 的一种语法糖，它提供了一种更优雅的方式来编写异步代码。通过使用 async 关键字声明一个异步函数，我们可以在其中使用 await 关键字等待 Promise 对象的解决（resolved）或拒绝（rejected），使得代码看起来更像是同步的方式进行编写和阅读。

基本用法

async 声明使用 async 关键字声明一个异步函数。异步函数内部可以包含 await 表达式。

async function fetchData() {
  // 异步操作
}

await 表达式在异步函数内部，可以使用 await 关键字等待一个 Promise 对象，并返回其 resolved 的结果。这样，在 await 表达式之后的代码将会等待该 Promise 对象解决，然后继续执行。

async function fetchData() {
  const result = await somePromise; // 等待 Promise 对象执行完毕
  console.log(result); // 输出已解决的结果
}

await后面放axios也是可以的，原因无他。

仅因为axios 是一个基于 Promise 的 HTTP 客户端库，它提供了更丰富、更方便的功能来发送 Ajax 请求和处理响应。而 Promise 则是一种通用的处理异步操作的对象，可以在各种场景下使用，并通过链式调用的方式来处理异步操作的结果。

错误处理

通过将 await 表达式放在 try-catch 块中，可以捕获异步操作抛出的错误，并进行相应的处理。

async function fetchData() {
  try {
    const result = await somePromise;
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

在 async 函数内部，如果需要抛出一个错误并将其封装为 Promise.reject()，可以使用 throw 关键字。

async function fetchData() {
  throw new Error('请求失败');
}

并行执行多个异步操作

若有多个独立的异步操作，我们可以使用 Promise.all() 方法来并行执行它们，并等待所有异步操作都完成后获取结果。

async function fetchMultipleData() {
  const promise1 = fetch(url1);
  const promise2 = fetch(url2);
  
  const [result1, result2] = await Promise.all([promise1, promise2]);
  console.log(result1, result2);
}

async/await 与同步代码混用

同步代码中使用 await 在一个异步函数内部，我们可以使用 await 关键字来等待异步操作的结果，但是也可以将其用于同步操作，使得代码逻辑更加清晰。

async function doSomething() {
  const result = await syncFunction(); // 等待一个同步函数执行完毕
  console.log(result);
}

async 函数调用我们可以在同步代码中调用异步函数，虽然这样的调用本身是异步的，但我们可以将它视为一个同步操作，并根据需要等待其结果。

function syncFunction() {
  const result = await asyncFunction(); // 等待一个异步函数执行完毕
  console.log(result);
}

axios 和 Promise 的相同点

异步操作：无论是 Axios 还是 Promise，它们都用于处理异步操作。Axios 通过发送 HTTP 请求和处理响应来实现异步操作，而 Promise 是一种通用的处理异步操作的对象，可以在各种场景下使用。
基于 Promise：Axios 是基于 Promise 的，它返回的是一个 Promise 对象。Promise 提供了一种更优雅、可读性更好的方式来处理异步代码。
错误处理：无论是 Axios 还是 Promise，它们都提供了错误处理的机制。Axios 可以捕获请求错误和响应错误，并将错误信息封装成一个统一的错误对象返回。Promise 通过 reject 状态来表示异步操作失败，并能够使用 .catch() 方法来捕获并处理错误。