CODEWITHSUNDEEP
javascriptaxioses6-promise
dmikester1
dmikester1

Reputation: 1362

axios - how to chain axios calls within a single promise

I am still very new to Axios and promises. I'm close to understanding this, but I know I am doing some things wrong. I have a javascript method that is supposed to return a promise. Inside that method, I have an Axios post with two .then methods chained onto it. If my initial post fails, I get this ugly error in the console: Unhandled promise rejection ReferenceError: "reject is not defined". I have a feeling I shouldn't be nesting the .catch methods like I am. I'm thinking it should simply be post.then.then.catch.

Additionally, can anyone see why I'm not getting itemInformation being sent back in the response in the second .then?

Here is the relavant Javascript code(the addToCartVue method gets called first):

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

Upvotes: 0

Views: 2208

Answers (1)

anuragb26
anuragb26

Reputation: 1475

I think the issue is missing 'return' keyword.

Try adding return in two places.

 return axios.post(POST_ENDPOINT...

And also inside updateCartInfo,

return axios.get(GET_ENDPOINT,...

Also, i don't think you need to wrap you code inside a Promise object since axios already returns a promise.This will avoid reject reference error.

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
  }
})

And catch your errors in the call to 

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

Upvotes: 2

Related Questions