如何正确使用await控制异步函数

首先要明白异步函数的特点：被调用时立即返回一个Promise对象。函数执行完毕后再对这个Promise进行处理，使返回函数执行完毕的正确结果。

先来看一段代码：

const getAllArticle = function () {
​
 let data = articleGetAllService();
​
 articleList.value = data;
​
};

其中articleGetAllService就是一个异步函数，当articleGetAllService被调用时，它立即返回了一个Promise对象，这个对象被data接收了。但是getAllArticle并不会等待异步函数执行完毕，结果data就直接被赋值给了articleList.value。这导致articleList.value得到了一个错误的值。

然后再来了解一下await 和 async。``

async是用于声明函数是异步的。要在一个函数内使用await，这个函数必须得是异步的。

await 是用来暂停异步函数执行的关键字。当 await 后面的 Promise 对象执行完成后，它会返回 Promise 对象执行的结果，然后执行 await 之后的代码。简单来说，这时程序变成了同步的状态。举个例子：

const getAllArticle = async function () {
​
 let data =  articleGetAllService();
​
 articleList.value = data;
​
};

当程序调用它时，由于使用了await，getAllArticle将会暂停在调用articleGetAllService的地方，直到articleGetAllService执行完毕，返回了正确的值。这样，data接收到的才是正确结果。

那么接下来将情况变得复杂一些：

这是一个vue文件中的一个函数：

const getAllArticle =  function () {
​
 let data =  articleGetAllService();
​
 articleList.value = data;
​
};

它调用的articleGetAllService是某个js文件中的函数，具体如下：

export function articleGetAllService() {
​
 axios.get("http://localhost:8080/article/getAll")
​
 .then((result) => {
​
  return result;
​
 }).catch((err) => {
​
  alert(err);
​
 });
​
}

要注意的是axios是异步的。首先，getAllArticle调用了articleGetAllService，然后articleGetAllService调用了axios的get方法。由于axios是异步的，它立即返回了一个空的Promise对象。而articleGetAllService没有等待axios执行完毕，就将这个Promise返回给了getAllArticle。随后getAllArticle将这个空的Promise赋给了articleList.value，结果错误了。

那如果在articleGetAllService加上await，让它等待axios执行完毕，会怎么样呢？结果依然是错误的。因为await必须在异步函数中使用，所以articleGetAllService必须加上async关键字成为一个异步函数。虽然articleGetAllService确实等待了axios执行完毕，得到了正确的结果，但是由于articleGetAllService本身是异步的，它在被getAllArticle调用时就返回了一个空的Promise对象，而getAllArticle直接将这个Promise对象拿去使用了......

export async function articleGetAllService() {
​
 return await axios.get("http://localhost:8080/article/getAll")
​
 .then((result) => {
​
  return result;
​
 }).catch((err) => {
​
  alert(err);
​
 });
​
}

那么如何才能得到正确的结果呢？那就是在getAllArticle中也使用await等待articleGetAllService执行完毕，让这个程序强制变为同步的。要注意的是这时getAllArticle也会成为一个异步函数，要注意可能带来的问题。

最后，await在起作用时，只是暂停了当前函数的执行，并没有暂停其他函数。