CODEWITHSUNDEEP
vue.jsasync-awaitaxiosnuxt.js
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

How to use response of a axio call to build request of another

This is how my current asyncData looks like, it's working and filling events and booking using axios calls

async asyncData({ params, app }) {
  const events = await app.$api.event.index(app.i18n.locale)
  const booking = await app.$api.event.getByPath(
    app.i18n.locale,
    params.detail
  )

  return {
    events,
    booking
  }
},

But i need to add another object into data, registration, which needs a booking value to generate the axios url.

I tried in the booking's promise

async asyncData({ params, app }) {
  let registration;
  const events = await app.$api.event.index(app.i18n.locale)
  const booking = await app.$api.event.getByPath(
    app.i18n.locale,
    params.detail

  ) .then((result) => {
        registration = app.$api.event.getRegitrations(
          app.i18n.locale,
          result.id
        )
  });

  return {
    events,
    booking,
    registration
  }
},

But this way booking is empty and registration has value [object Promise] (even that i see both axios responses in the dev tools)

How can I achieve that?

Upvotes: 1

Views: 136

Answers (3)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try to define registration as data property then watch booking property and update registration when booking is available

data(){
   return{
    registration:null
  }
},
watch:{
   booking:{
    handler(newVal){
      if(newVal && newVal.id){
         this.$api.event.getRegitrations(
          this.i18n.locale,// or this.$i18n
          newVal.id
        ).then(res=>{
          this.registration=res.data
       })
     }
   },
  deep:true,
  immediate:true
 }
},
async asyncData({ params, app }) {

  const events = await app.$api.event.index(app.i18n.locale)
  const booking = await app.$api.event.getByPath(
    app.i18n.locale,
    params.detail

  ) 
 
  return {
    events,
  }
},

Upvotes: 2

RicardoAgra
RicardoAgra

Reputation: 680

An await call is a promise that gets resolved first before executing the rest of the async function code. So you already have access to the result of the variable events before you try to assign to booking. If you await for booking, you can read from the variable and use it to compose the next Axios call.

async asyncData({ params, app }) {
  const events = await app.$api.event.index(app.i18n.locale);
  const booking = await app.$api.event.getByPath(
    app.i18n.locale,
    params.detail
  );
  const registration = await app.$api.event.getRegitrations(
    app.i18n.locale,
    booking.id
  )

  return {
    events,
    booking,
    registration
  }
}

Upvotes: 1

Ian Cho
Ian Cho

Reputation: 107

I have no idea what are you using it for the http calling but, If you use axios, you can get a data like this.

  const booking = await app.$api.event.getByPath(
    app.i18n.locale,
    params.detail

  ) .then((response) => {
        registration = app.$api.event.getRegitrations(
          app.i18n.locale,
          response.data.id
        )
  });

Upvotes: 1

Related Questions