vue中执行异步函数async和await的用法

一、async基础用法

1. async函数,会返回一个promise对象,可以用.then调用async函数中return的结果

   async function helloAsync() {
   return "返回结果";
   }
   console.log(helloAsync()) // 输出Promise对象: Promise {: '返回结果'}
   helloAsync().then(v => {
   console.log(v); // 输出:返回结果
   })

2. async函数中,可以使用await表达式,async函数执行,遇到await,会先暂停,等到await后的异步执行完毕,再继续往后执行

   // 1.使用await
   function testAwait() {
   return new Promise((resolve) => {
   setTimeout(function () {
   console.log("异步中的输出");
   resolve();
   }, 1000);
   });
   }
   async function helloAsync() {
   await testAwait(); // 等待异步
   console.log("async中的输出");
   }
   helloAsync(); // 输出:先输出"异步中的输出",再输出"async中的输出"

   // 2.不使用await
   function testAwait() {
   return new Promise((resolve) => {
   setTimeout(function () {
   console.log("异步中的输出");
   resolve();
   }, 1000);
   });
   }
   async function helloAsync() {
   testAwait();
   console.log("async中的输出");
   }
   helloAsync(); // 输出:先输出"async中的输出",再输出"异步中的输出"

解析：

async：表示函数是异步执行，

await：表示当前函数先执行，执行完之后，再执行其他函数

ps:await用于等待一个promise对象,它只能在async函数中使用.