promise有待学习,先记录一下最近再项目中学的关于async和await
async await
其实就是用同步的写法去实现异步方法
async deleteproduct(record) {
const result = await productApi.delete(record.productCode)
const response = utils.ensureResponse(result)
if (!response.success) {
this.$message.warn(response.message)
return
}
this.$message.info('删除成功')
this.$refs.table.refresh()
},
- async和await是基于promise的,async函数始终返回一个promise对象
promise对象示例:
promise对象的值用.then去获取
在vue中,一般使用axios去发送请求,axios是基于promise对象封装的ajax的第三方库,所有axios里面包含了promise对象。
示例:(result是一个promise对象)
result.then(res=>{
console.log(res) // res为promise中的值
})
在loadData中调用异步方法二次组装数据
错误写法
loadData: (parameter) => {
const params = {}
const query = Object.assign({}, parameter, this.query)
params.page = query.pageNo
params.pageSize = query.pageSize
params.row = (params.page - 1) * params.pageSize
params.productName = query.productName
params.productCode = query.productCode
params.productId = query.productId
return productApi
.search(params)
.then((res) => {
const response = utils.ensureResponse(res)
if (!response.success) {
this.$message.warn(response.message)
}
const payload = Object.assign({ count: 0, list: [] }, res.payload)
return Object.assign({
pageSize: parameter.pageSize,
pageNo: parameter.pageNo,
totalCount: payload.total,
totalPage: Math.ceil((payload.total * 1.0) / parameter.pageSize),
data: (payload.data || []).map((x) => {
// 拼接权限数据
const result = this.getUsers(x)
result.then((users) => {
Object.assign(x, users)
})
return x
})
})
})
.catch((e) => {
this.total = 0
if (e && e.message) {
this.$message.error(e.message)
}
})
},
错误原因
- getUsers是一个异步方法,调用的时候要加await
- getUsers异步方法放在.map这个同步方法里面,会出问题
- 所以需要把getUsers异步方法拿到data的return外面,但是此时getUsers异步方法还在.then里面
- 所以需要把.then的写法改成async await
正确写法
loadData: async (parameter) => {
const params = {}
const query = Object.assign({}, parameter, this.query)
params.page = query.pageNo
params.pageSize = query.pageSize
params.row = (params.page - 1) * params.pageSize
params.productName = query.productName
params.productCode = query.productCode
params.productId = query.productId
const res = await productApi.search(params)
const response = utils.ensureResponse(res)
if (!response.success) {
this.$message.warn(response.message)
}
const payload = Object.assign({ count: 0, list: [] }, res.payload)
// 组装 data
const data = payload.data || []
for (const item of data) {
Object.assign(item, await this.getUsers(item))
}
return Object.assign({
pageSize: parameter.pageSize,
pageNo: parameter.pageNo,
totalCount: payload.total,
totalPage: Math.ceil((payload.total * 1.0) / parameter.pageSize),
data: payload.data || []
})
},