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’了。
更多推荐
所有评论(0)