问下各位大佬，axios请求这个地方有没有可以利用async、await优化的地方？

Z时代
2024-03-15
分类：IT

具体代码如下：
（这是一段在vue框架的element-ui中操作table组件删除的回调函数，其中then后边的axios请求是为了利用数据响应式动态更新表格数据，想请问下有没有async、await的优化方案？）

deleteRow (row) {
  this.$confirm('确认删除此条产品吗？删除后无法恢复', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      this.$axios
        .post('/delProduct', {
          id: row.id
        })
        .then(({ data }) => {
          // 重新获取商品列表数据
          this.$axios
            .post('/getProducts', {
              currentPage: 1
            })
            .then(({ data }) => {
              this.changeTableData(data.result)
            })
            .catch((err) => console.log(err))
          // 弹出提示
          this.$message({
            message: data.msg,
            type: 'success'
          })
        })
        .catch((err) => console.log(err))
    })
    .catch(() => {
      this.$message({
        message: '已取消“删除”的操作',
        type: 'info'
      })
    })}

回答：

async/await 本质是 Promise 语法糖，只要出现 Promise 的地方都可以改为用 async/await：

const methods = {
  async deleteRow(row) {
    try {
      await this.$confirm('确认删除此条产品吗？删除后无法恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    } catch (e) {
      this.$message({
        message: '已取消“删除”的操作',
        type: 'info'
      })
    }
    await this.$axios.post('/delProduct', { id: row.id })
    // 重新获取商品列表数据
    const data = await this.$axios.post('/getProducts', { currentPage: 1 })
    this.changeTableData(data.result)
    // 弹出提示
    this.$message({
      message: data.msg,
      type: 'success'
    })
  }}

对于 Promise.catch() 在 async/await 中需要用 try { ... } catch (e) { ... } 来替代。

回答：

methods: {
    // $confirm 是一个函数
    confirmed() {
        return this.$confirm(...);
    },
    // axios 请求独立出来
    getFirst(params) {
        return this.$axios(...);
    },
    getSecond(params) {
        return this.$axios(...);
    },
    getOther(params) {
        return this.$axios(...);
    },
    errorCallback(error) {
        // 处理错误
    }, 
    deleteRow(row) {
        this.confirmed()
            .then(res => this.getFirst(参数))
            .then(res => this.getSecond(参数))
            .then(res => this.getOther(参数))
            .catch(this.errorCallback);
    },
    // 所以用 async/await 还可以写成
    async deleteRow(row) {
        try {
            await this.confirmed();
            const params = await this.getFirst();
            const response = await this.getSecond(params);
            await this.getOther(response.data.id); 
        } catch (error) {
            this.errorCallback(error)
        }
    }
}