element-ui js方法转换成async await写法

element-ui有很多自己封装好的js方法，配合组件一起使用往往很方便，比如消息提示框组件，element-ui官网给出的示例是这样的：

this.$confirm('此操作将解除场景策略与桶之间的映射, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // do somethings
          }).catch(() => {
            this.$message.info('已取消解除')
          })

但项目中已经使用了async await方式进行了异步请求，这种请求更方便，所以如何进行转化呢？

转化之前首先得知道什么是async await，他们到底做了什么事？

async函数

async函数返回的是一个Promise对象，如果在函数中return一个直接量，async会把这个直接量通过Promise.resolve()封装成一个Promise对象。

async function testAsync() {
    return 'hello async'
}

因此如果外层不通过await获取返回值的情况下，我们应该这么写：

testAsync().then(result => {
    console.log(result)
})

很显然，这种方式就是element-ui官网的方式。

如果async函数没有返回值，他就会返回Promise.resolve(undefined)

Promise的特点——无等待，如果没有await情况下执行async函数，它会立即执行，并返回一个Promise对象，绝不会阻塞后面的语句。

await

await到底在等是什么呢？一般都认为，await在等async函数完成，也就是在等async返回一个Promise对象，但要注意，await不是只能等待Promise对象，准确的说它是在等待一个返回值，只是async返回的是Promise对象。下面代码是完全正确的：

function getSomething() {
    return 'something'
}

async function testAsync() {
    return Promise.resolve('hello async')
}

async test() {
    let v1 = await getSomething()
    let v2 = await testAsync()
    console.log(v1)
    console.log(v2)
}

当await等到了要等的东西后，它就会阻塞后面的代码，等着Promise对象resolve，然后得到resolve后的值，作为await的值。

两种方式的比较

现在有个函数：

function takeLongTime () {
    return new Promise(resolve => {
        setTimeout(() => resolve('long_time_value), 1000)
    })
}

普通方式：

takelongTime().then(result => {
    console.log(result)
})

async/await方式：

async function test () {
    let result = await takeLongTime()
    console.log(result) 
}

乍一看，好像async/await方式好像没什么优势，而且还多了一行代码，单一的Promise链并不能体现出async的优势，但需要处理多个Promise对象组成的then链时，async比普通的方式具有巨大的优势，尤其是当下一个Promise对象需要用到上一个Promise对象的结果时，普通方式的参数传递太麻烦了！

如何转换

那么最后回归问题，如何将element-ui的方法转化成async/await方式就很简单了。

let response = await this.$confirm('此操作将永久删除场景策略以及其下的排序策略与排序算法，是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
    }).catch(() => {
      this.$message.info('已取消删除')
    })
    if (response === 'confirm') {
      let url = `/rcdScenStgDel`
      let response = await this.apis.post(...)
      let result = response.body.result
    }
  }

至于你怎么知道Promise.resolve()返回的值是什么，直接在控制台打印出来就知道是’confirm’了。