通过async/await解决异步问题

1、写法

async function name(){
	
}; 

async 置于函数前，表示该函数是一个异步函数

2、async/await异步函数的执行不会阻塞后面代码的运行。
await只是暂停了当前的函数，而不是整段代码

function after5Seconds(num) {
      return new Promise((resolve, reject) => {
          setTimeout(function() {
              resolve(2*num)
          },5000);
      })
  };
  async function testResult() {
      let result = await after5Seconds(50);
      console.log("五秒后输出",result);
  };
  function result() {
      console.log('数据输出')
  };
  testResult()
  result()

因为async 异步函数的执行，不会阻塞后面代码的执行，所以这里是先输出“数据输出”，经过5秒后再输出“五秒后输出 100”

3、async 函数返回的是一个promise对象，可以通过.then()的方法获取返回值。
JavaScript Promise返回值详解，参考：https://blog.csdn.net/zyj362633491/article/details/86088476

function after5Seconds(num) {
      return new Promise((resolve, reject) => {
          setTimeout(function() {
              resolve(2*num)
          },5000);
      })
  };
  async function testResult() {
      let result = await after5Seconds(50);
      return result
  };
  
  testResult().then(res => {
      console.log(res)
  })

4、在Vue中使用

<div id="app"></div>

<script src="../js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var vue = new Vue({
        el:'app',
        data:{},
        methods:{
            after2Seconds(num) {
                return new Promise((resolve, reject) => {
                    setTimeout(function() {
                        resolve(2*num)
                    },2000);
                })
            },
            async testResult() {
                let result = await this.after2Seconds(50);
                console.log(result);
            }
        },
        components:{},
        create() {},
        mounted() {
            this.testResult()
        },
    })
  </script>

其中，resolve、reject，分别表示异步操作执行成功和失败后的回调函数。await 后面除了可以调用函数，也可以调用接口。
参考推荐：https://blog.csdn.net/qq_32442973/article/details/89322763