你可能遇到的问题
声明一个变量，用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() { // 异步操作 } • 1 • 2 • 3
- 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() 方法来捕获并处理错误。
总结
当我们遇到需要代码加载顺序必须同步时，也就是执行顺序必须由上而下，等中间代码执行完毕才能向下执行时。
我们需要用async和await来介入，他们的配合使用，可以使异步变为同步，多用于改变接口请求等异步操作。
