Ответ Axios не определен в методе .then

Question

Я не могу понять, что здесь происходит. Кажется, это какая-то проблема синхронизации / асинхронности. У меня есть axios POST с цепочкой .then, который выполняет другую функцию с помощью GET-запроса axios. Запрос GET имеет цепочку .then, которая создает объект с именем itemInformation и возвращает его. Первый .then на POST имеет вторую цепочку .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, Обещаниявсегда разрешать асинхронныйСледовательно, поскольку в updateCartInfo вы делаете axios.get(GET_ENDPOINT, ...).then( ... console.log() ... ), он асинхронно ожидает axios.get.В течение этого времени выполняется другой then ("info2").Он не ждет обещания updateCartInfo, поскольку вы его не вернули.