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’了。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐