axios - how to chain axios calls within a single promise

Question

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

You may actually be pretty close. So, you are returning the result of `updateCartInfo` in your first `.then` (in `addToCartVue` method), but `updateCartInfo` itself should have a `return` in front of the `axios.get` call (therefore returning a promise). I think as long as you do that, this will chain properly to the second `then` in `updateCartInfo`. — Val Geyvandov, Jan 24 '19 at 20:06
You need to be aware of the [_deferred anti-pattern_](https://stackoverflow.com/a/25569299/633183). Then take a look at `async` and `await`. It will reduce a lot of boilerplate in your programs. — Mulan, Jan 24 '19 at 20:29

anuragb26 · Accepted Answer · 2019-01-24T20:49:25.767

2

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

edited Jan 24 '19 at 20:49

answered Jan 24 '19 at 20:11

anuragb26

1,467
11
14

I added those 2 returns. I'm still getting that same error message when the first post fails. `Unhandled promise rejection ReferenceError: "reject is not defined"` – dmikester1 Jan 24 '19 at 20:16
Also, I'm not getting itemInformation being passed back to my second then call. How can I do that? I've tried `return itemInformation` and `resolve(itemInformation)`; – dmikester1 Jan 24 '19 at 20:36
Thank you, my errors appear to be working. I'm still not getting the response back in my second .then call. If you have any ideas about that, I'd love to hear them. – dmikester1 Jan 24 '19 at 21:31
That may be happening when the if condition in your second .then fails.You might want to throw an Error in that scenario which will be caught in your catch error of addVue. Add the following line after the if condition. throwError('Error message') – anuragb26 Jan 25 '19 at 06:27

axios - how to chain axios calls within a single promise

1 Answers1