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