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

一、async基础用法

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

    async function helloAsync() {
          return "返回结果";
      }
      console.log(helloAsync()) // 输出Promise对象: Promise {<fulfilled>: '返回结果'}
      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函数中使用.