首先要明白异步函数的特点:被调用时立即返回一个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
在起作用时,只是暂停了当前函数的执行,并没有暂停其他函数。