使用Vue.js将数据从一个API传递到另一个API

使用Vue.js将数据从一个API传递到另一个API,vue.js,axios,Vue.js,Axios,我正在进行API调用以返回约会列表。每个约会都有一个clientID作为FK,以便我们可以获取客户信息。当我调用约会API并使用clientID使用ID调用客户机时,是否可能获取该clientID。下面是我所想的它可能如何工作,但它不工作。另外,解释一下为什么这不起作用也不错 export default{ data (){ return{ appointment: [], client: [] } }, created

我正在进行API调用以返回约会列表。每个约会都有一个clientID作为FK,以便我们可以获取客户信息。当我调用约会API并使用clientID使用ID调用客户机时,是否可能获取该clientID。下面是我所想的它可能如何工作,但它不工作。另外,解释一下为什么这不起作用也不错

export default{
  data (){
      return{
          appointment: [],
          client: []
      }
  },
  created() {
      axios.get("http://localhost:3000/api/appointment")
      .then(res => this.appointment= res.data)
      .catch(err => {
          console.log(err)
      }),
      axios.get("http://localhost:3000/api/client/" + this.appointment.clientID)
      .then(res => this.client = res.data)
      .catch(err => {
          console.log(err)
      })
  }

它不工作,因为两个axios调用是同时进行的

当您进行第二次axios调用时,
clientID
未定义

确保在使用来自该响应的数据之前完成第一次调用

axios.get(…)
。然后(响应=>{
this.appointment=response.data
axios.get(“…/”+response.data.clientID)
.然后(response=>this.client=response.data
})
.catch(e=>console.log(e))

它不起作用,因为两个axios调用是同时进行的

当您进行第二次axios调用时,
clientID
未定义

确保在使用来自该响应的数据之前完成第一次调用

axios.get(…)
。然后(响应=>{
this.appointment=response.data
axios.get(“…/”+response.data.clientID)
.然后(response=>this.client=response.data
})
.catch(e=>console.log(e))

一条实际的错误消息或一些关于什么不起作用的细节可能会有所帮助。可能是res.data需要通过JSON.parse进行处理,以便在第二次调用中按预期访问它。很可能您当前正在绑定一个普通字符串(
res.data
)抱歉,我应该添加这一点。当我控制台记录它从调用返回到ID为的客户端的数据时,它返回null。这似乎是合理的,因为处理可能以前已经失败。请检查浏览器中的“网络”选项卡,以验证在对
api/client/
的请求中是否正确设置了clientID(我猜不是)。还要检查实际绑定到此.appointment的值(我猜它是一个普通字符串)。客户端api工作正常。我已经在postman和我应用程序的另一个页面中对其进行了测试。实际错误消息或某些具体信息可能会有所帮助。可能是res.data需要通过JSON.parse进行处理,以便在第二次调用中按预期访问。很可能您当前正在绑定一个纯文本string(
res.data
)抱歉,应该添加这一点。当我用控制台记录它从调用返回的数据到ID为的客户端时,它返回null。这似乎是合理的,因为处理以前可能已经失败。请检查浏览器中的“网络”选项卡,以验证在请求
api/client/
(我猜不是)。还要检查这个.appointment实际绑定了什么值(我猜它是一个普通字符串)。客户端api工作正常。我已经在postman和我应用程序的另一个页面中对其进行了测试。