Async/Await 来简化Promise(以Element-ui 询问框为例)

什么是Async/Await，及其作用

① async/await是ES7新特性
② async/await是写异步代码的新方式，以前的方法有回调函数和Promise
③ async/await是基于Promise实现的，它不能用于普通的回调函数
④ async/await与Promise一样，是非阻塞的
⑤ async/await使得异步代码看起来像同步代码，这正是它的魔力所在

await 必须写在 async 函数中, 但 async 函数中可以没有 await，如果 await 的 Promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理。

Promise 中不能自定义使用 try/catch 进行错误捕获，但是在 Async/await 中可以像处理同步代码处理错误

使用await/async时，你不再需要那么多箭头函数，这样你就可以像调试同步代码一样跳过await语句。

Element-ui 询问框 Promise写法

挂载组件到实例上

import {

  Message,

  MessageBox,

} from 'element-ui'

Vue.prototype.$Msg = Message

Vue.prototype.$queding = MessageBox.confirm

代码逻辑：

点击了删除按钮，显示询问，两个按钮对应两个执行方式，点击确定还有两种情况，删除成功，删除失败

组件封装后续使用了Promise

      // 删除用户的相关操作

      deleteUser(id) {
        this.$queding('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete(`users/${id}`).then(() =>{
            this.$Msg({
              type: 'success',
              message: '删除成功!'
            });
            this.getUserList()
          }).catch(() => {
            this.$Msg.error('删除用户失败！')
          })
        }).catch(() => {
          this.$Msg({
            type: 'info',
            message: '已取消删除'
          });
        });

 使用Async/Await

      async deleteUser(id){
        //弹窗询问用户是否删除数据
        const confirmResult = await  this.$queding(
          '此操作将永久删除该用户, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)
        // 如果用户确认删除，则返回值为字符串 confirm
        // 如果用户取消删除，则返回值为字符串 cancel
        // console.log(confirmResult)
        if (confirmResult !== 'confirm'){
          return this.$Msg.info('已取消删除')
        }
        const {data:res} = await this.$http.delete(`users/${id}`)
        if (res.meta.status !== 200) return this.$Msg.error('删除用户失败！')
        this.$Msg.success('删除用户成功！')
        // 删除成功后 重新获取用户列表
        await this.getUserList()
      },

async/await使得异步代码看起来像同步代码，这正是它的魔力所在