.then方法

Question

我不知道这是怎么回事。它似乎是某种时序/异步问题。我有一个axios POST，它具有链接的.then，然后使用axios GET请求运行另一个功能。 GET请求具有链接的.then，该链接建立了一个名为itemInformation的对象并返回该对象。 POST上的第一个.then具有第二个.then链，需要处理itemInformation对象。

很抱歉，如果这一切令人困惑，则希望代码能使它更有意义。我正在控制台同时在两个地方记录该对象，而控制台日志却比我期望的要向后出现。所以这就是为什么我认为这里可能是某种异步或时序问题。

代码：（首先调用addToCartVue）

addToCartVue(itemData) {
  let vm = this;

  vm.buildDataString(itemData); // just a simple function that creates the dataString, dataObject and quantity vars; no need to show this whole function

  return axios.post(POST_ENDPOINT, {
      data: vm.dataString
    },
    {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    }).then(response => {
    vm.updateCartInfo(vm.dataObject, itemData.addToCartParameters.itemId, vm.selectedStoreId, vm.quantity);
  }).then(response => {
    console.log("info2: ", response);
    if (itemData.addToCartParameters.showLB) {
      vm.emitGlobalEvent('addToCart::open', response);
      return (response);
    }
  }).catch(err => console.log(err));
},
updateCartInfo(dataObject, itemId, selectedStore, quantity) {
  return axios.get(GET_ENDPOINT, {
    params: dataObject,
  }).then(response => {

    let addedItem = null;
    let basketInfo = null;
    let productQuantity = null;
    try {
      cartDropDown.populateCartDropDown(response.data);

      addedItem = response.data.addedItem;
      basketInfo = response.data.basketInfo;

      productQuantity = quantity;
      if (addedItem.quantity > -1) {
        productQuantity = addedItem.quantity;
      }
    } catch (e) {
      console.log(e);
    }

    const itemInformation = {
      "itemId": itemId,
      "selectedStore": selectedStore,
      "addedItem": addedItem,
      "basketInfo": basketInfo,
      "displayValues": null,
      "quantity": productQuantity,
      "isCustomProduct": false
    };

    console.log("info1: ", itemInformation);

    return itemInformation;
  }).catch(error => console.log(error));
}

这是我在控制台输出中看到的内容：

我在网上找到的每个Axios教程都展示了如何进行基本的axios.get(url).then(get response).catch(catch error)，但在更复杂的用例中却找不到任何示例。

Answer 1

response值不通过多个链链接。您有以下代码：

// ... 
}).then(response => {
    vm.updateCartInfo(vm.dataObject, itemData.addToCartParameters.itemId, vm.selectedStoreId, vm.quantity);
}).then(response => {
    console.log("info2: ", response);
    if (itemData.addToCartParameters.showLB) {
        vm.emitGlobalEvent('addToCart::open', response);
        return (response);
    }
}) // ...

您有两个then链链接。在第一个中，定义了response，如您在控制台日志中所见。 您需要返回它，以便将其传递到第二个链接。如果then函数没有return值，那么下一个承诺链then将收到undefined，如您所见。

对于console日志的顺序，Promise始终会解决异步问题。因此，由于在updateCartInfo中您正在执行axios.get(GET_ENDPOINT, ...).then( ... console.log() ... )，因此它正在异步等待axios.get。在这段时间内，另一个then（“ info2”）被执行。它不会等待updateCartInfo的诺言，因为您没有返回它。