如何在单个承诺中链接 Axios 调用

Question

我对Axios和承诺仍然很陌生。 我接近理解这一点，但我知道我做错了一些事情。 我有一个应该返回承诺的 javascript 方法。 在该方法中，我有一个 Axios 帖子，上面链接了两个.then方法。 如果我的初始帖子失败，我会在控制台中收到这个丑陋的错误： Unhandled promise rejection ReferenceError: "reject is not defined" . 我有一种感觉，我不应该像我一样嵌套.catch方法。 我认为它应该只是post.then.then.catch.

此外，任何人都可以看到为什么我没有在第二个.then response中发回项目信息？

这是相关的Javascript代码（首先调用addToCartVue方法）：

addToCartVue(itemData) {
  let vm = this;
  return new Promise((resolve, reject) => {
    vm.buildDataString(itemData);
    axios.post(POST_ENDPOINT, {
        data: vm.dataString
      },
      {
        /*headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }*/
      }).then(response => {
      return vm.updateCartInfo(vm.dataString, itemData.addToCartParameters.itemId, vm.selectedStoreId, vm.quantity);
    }).then(response => {
      if (itemData.addToCartParameters.showLB) {
        vm.emitGlobalEvent('addToCart::open', itemData);
        resolve(response);
      }
    }).catch(error => reject(error));
  }).catch(error => reject(error));
}, // end of addToCartVue method
buildDataString(itemData) {
  // irrelevant code that builds quantity and dataString variables
  vm.quantity = quantity;
  vm.dataString = dataString;
}, // end of buildDataString method
updateCartInfo(dataString, itemId, selectedStore, quantity) {
  axios.get(GET_ENDPOINT, {
    params: {
      data: dataString
    }
  }).then(response => {
    cartDropDown.populateCartDropDown(response);
    const addedItem = response.addedItem;
    const basketInfo = response.basketInfo;
    let productQuantity = quantity;
    if (addedItem.quantity > -1) {
      productQuantity = addedItem.quantity;
    }
    const itemInformation = {
      "itemId": itemId,
      "selectedStore": selectedStore,
      "addedItem": addedItem,
      "basketInfo": basketInfo,
      "displayValues": null,
      "quantity": productQuantity,
      "isCustomProduct": false
    };
    return itemInformation;
  }).catch(err => error => reject(error));
} // end of updateCartInfo method

Answer 1

我认为问题在于缺少"返回"关键字。

尝试在两个位置添加返回。

 return axios.post(POST_ENDPOINT...

还有更新购物车信息的内部，

return axios.get(GET_ENDPOINT,...

另外，我认为您不需要将代码包装在 Promise 对象中，因为 axios 已经返回了一个 promise。这将避免拒绝引用错误。

let vm = this;
vm.buildDataString(itemData);
return axios.post(POST_ENDPOINT, {
    data: vm.dataString
  },
  {
    /*headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    }*/
  }).then(response => {
  return vm.updateCartInfo(vm.dataString, itemData.addToCartParameters.itemId, vm.selectedStoreId, vm.quantity);
}).then(response => {
  if (itemData.addToCartParameters.showLB) {
    vm.emitGlobalEvent('addToCart::open', itemData);
    return response
  }
})

并在调用中捕获您的错误

addVue().then(data => console.log(data).catch(err => console.log(err))