什么是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使得异步代码看起来像同步代码,这正是它的魔力所在