如何使用 axio 调用的响应来构建另一个请求答案

【问题标题】：How to use response of a axio call to build request of another如何使用 axio 调用的响应来构建另一个请求
【发布时间】：2021-06-19 01:03:11
【问题描述】：

这就是我当前的 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 响应）

我怎样才能做到这一点？

【问题讨论】：

标签： vue.js async-await axios nuxt.js

【解决方案1】：

我不知道你用它来进行 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
        )
  });

【讨论】：

您好，Ian 谢谢，我认为问题不在于 axios 调用，因为我在开发工具中看到了正确的值，但变量为空
啊，好吧。我误解了你的问题。在这种情况下，您最好使用 vuex。将您的注册数据存储在前端的“Store”和“Get”中。
因为你的代码是异步工作的。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

await 调用是在执行其余异步函数代码之前首先得到解决的 Promise。因此，在尝试分配给booking 之前，您已经可以访问变量events 的结果。如果你 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
  }
}

【讨论】：