vue中的promise对象，async和await学习记录

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()
},

1. 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)
        }
    })
},

错误原因

1. getUsers是一个异步方法，调用的时候要加await
2. getUsers异步方法放在.map这个同步方法里面，会出问题
3. 所以需要把getUsers异步方法拿到data的return外面，但是此时getUsers异步方法还在.then里面
4. 所以需要把.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 || []
    })
},