javascript - 当 axios 中的 ajax 调用成功时执行某些操作 - 在 axios 中链接 then()

Question

当 axios 中的 ajax 调用成功时，我正在尝试做一些事情

    save() {

      this.isUpdateTask ? this.updateProduct() : this.storeProduct()

      this.endTask()

    }

如果更新或存储产品的 ajax 调用成功，我想运行 endTask() 函数。

我不希望在 ajax 调用不成功时运行 endTask() 函数。

我该怎么做？

商店功能:

    storeProduct() {
      return axios
        .post("products", this.getFormData())
        .then(
          response => this.products.push(response.data.data)
        )
        .catch(
          error => (this.serverErrors = error.response.data.errors.detail)
        )
    },

Answer 1

您可以在新的 promise 中调用此方法，如下例所示:

   save() {
      Promise.resolve()
      .then(() => {
        return this.isUpdateTask ? this.updateProduct() : this.storeProduct()
      })
      .then(() => {
        this.endTask()
      })
    }

还有其他方法可以做:

save() {
  (this.isUpdateTask ? this.updateProduct() : this.storeProduct()).then(() => {
    this.endTask()
  })
}

或者赋值给一个变量:

save() {
  const promiseUpdate = this.isUpdateTask ? this.updateProduct() : this.storeProduct()

  promiseUpdate.then(() => {
    this.endTask()
  })
}

或者使用异步/等待:

async save() {
  await this.isUpdateTask ? this.updateProduct() : this.storeProduct()
  // this code runs only if everything happen successful
  await this.endTask()
}

---

关于 endTask 执行直到响应不成功，是因为您在 storProduct 中处理了 error。

.catch(
  error => (this.serverErrors = error.response.data.errors.detail)
)

所以，在这种情况下，有必要再次重新抛出错误:

.catch(
  error => {
    this.serverErrors = error.response.data.errors.detail
    throw error
  }
)

Promise的catch，和javascript的try/catch效果一样。

更多关于 catch 的引用 here .