promise、async、await三者有什么关系？

Promise对象

Promise对象是es6新增的的一个构造函数，用来解决回调地狱的问题。

Promise是一个容器，用来放置一个异步任务

容器中三种状态：

Pending—异步任务正在执行

Rejected—异步任务执行结束

Resolved—异步任务执行成功

只有promise实例才有then方法，使用then方法可以得到上一个回调函数的返回值，从此解决回调地狱的问题

async函数

async函数也是es6新增的。它结合promise可以使得异步代码像同步代码一样执行，从此再无回调

async函数的返回值

async函数内部的return返回值

如果return promise对象，则直接返回

如果return非promise对象，则包装成promise再返回

也就是说无论如何async都返回promise对象

那如何拿到结果呢？

（1）.then方法拿到结果
（2）在另一个async函数中通过await来接收

    <script>
      async function main() {
          // async函数会把return的非Promise对象包装为一个立即Resolve的Promise对象
             return 123
          //    async函数会把return 123包装为下面这样
           return new Promise(function (resolve, reject) {
               resolve(123)
           })
      }
      const ret = main()
      // 1、通过then来获取值
      ret.then(data => {
          console.log(data)
      })
      // 2、在另一个async函数中通过await来接收
      async function f() {
          const ret = await main()
          console.log(ret);
      }
      f()
  </script>

await

await只能在async函数中使用，它会把后面表达式的结果赋值给前面的成员

应用

在axios发请求的时候会经常用到es6新增的这三个。

axios的所有请求都支持Promise，内部都封装好了，都支持.then来获取结果。

当在async函数中使用await关键字，后面跟一个promise实例对象，await会把等待后面异步操作的结果，然后赋值给前面的成员。

        async handeShowlEditUser(item) { //标记为async函数
           this.editdialogForm = true;
           const res = await this.$http({ //使用await来接收axios请求的返回值
                   url: `/users/${item.id}`,
                   method: 'get',
                   // headers: {
                   //     Authorization: window.localStorage.getItem('token')
                   // }
               })
               if (res.data.meta.status === 200) { //直接获取结果，不需要.then方法，避免回调
                   this.editUserForm = res.data.data
               }
       }

那些函数可以被标记为async？

任何函数、匿名函数、有名函数、箭头函数、对象属性函数