ES6中await和then的使用及区别

点击打开视频教程

使用 .then

<template>
  <div id="app">
    <button @click="fn1">点击f1</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      _fn2:{}
    }
  },
  mounted(){
    this._fn2 = this.fn2()
    console.log(this._fn2);   //返回promise对象，因为async会通过Promise.resolve()把返回值封装成promise对象；
  },
  methods:{

    fn1(){
      this._fn2.then(() => {
        this.fn3()
      })
    },

    async fn2(){
      return 1
    },

    fn3(){
      console.log('1234')
    }

  }
}
</script>

<style scoped>

</style>

现在执行fn1()，结果显示promise和123，执行期间都发生了什么呢？

• fn2()返回一个promise，在某时刻返回resolve;
• .then已经被添加到链式回调，在这种情况下，fn1函数执行结束之后，fn1函数并不会暂停，所以在fn2()resolve时，fn1的作用域已经没有了，如果fn2或fn3报错，那么堆栈信息中应该包含fn1函数，但是fn1的作用域已经消失js引擎就会额外记录堆栈信息，记录fn1,把fn1附加到fn2返回的promise中，并往下传递，这样fn3在需要的时候可以被允许获取堆栈信息，降低性能，占用内存。

使用await

<template>
  <div id="app">
    <button @click="a">点击a</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      
    }
  },
  mounted(){
    
  },
  methods:{
    // await使用
    async a(){
      await this.b()
      this.c()
    },
    async b(){
      return 1
    },
    c(){
      console.log('ccc')
    },

  }
}
</script>

<style scoped>

</style>

1.首先执行了await b，然后时c函数，最后打印 ’ccc‘。

2.期间发生了什么？
await b()会暂停它所在的async函数的执行，直到异步的函数b执行结束之后，再执行函数c，await得到promise对象，await阻塞后续的代码，等到promise对象resolve并作为await的结果返回。

3.区别：await不需要保存当前堆栈信息，在执行函数b的时候，函数a暂停执行，作用域仍然存在，如果函数b，c报错，都可以直接生成相对应的堆栈信息，=》速度更快，内存节省。

async 内部的阻塞都在promise对象中异步执行，.then和await在堆栈信息存在区别；