Question

这就是我当前的 asyncData 的样子，它正在工作并使用 axios 调用填充 events 和 booking

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

但我需要将另一个对象添加到数据中，registration，它需要一个 booking 值来生成 axios url。

我尝试了 booking 的承诺

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

但是这样 booking 是空的并且 registration 具有值 [object Promise]（即使我在开发工具中看到了两个 axios 响应）

我怎样才能做到这一点？

Answer 1

尝试将 registration 定义为数据属性，然后观察 booking 属性并在 registration 可用时更新 booking

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

Answer 2

我不知道你用它来调用 http 是什么，但是，如果你使用axios，你可以得到这样的数据。

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

Answer 3

await 调用是在执行其余异步函数代码之前首先解决的承诺。因此，在尝试分配给 events 之前，您已经可以访问变量 booking 的结果。如果 await 为 booking，则可以从变量中读取并使用它来组成下一个 Axios 调用。

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

如何使用 axio 调用的响应来构建另一个

3 个答案: