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

user_533941 0
Viewed 60

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?

axios nuxt.js async-await vue.js
3 Answers

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,
  }
},
user_81728570

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

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
  }
}
user_94378520
Related