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

【问题标题】：Pass data from one API to another using Vue.js使用 Vue.js 将数据从一个 API 传递到另一个 API
【发布时间】：2021-04-12 17:54:28
【问题描述】：

我正在调用 API 以返回约会列表。每个约会都有一个作为 FK 的 clientID，以便我们可以获取客户信息。当我调用约会 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)
      })
  }

【问题讨论】：

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

标签： vue.js axios

【解决方案1】：

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

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

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

axios.get(...)
.then(response => {
    this.appointment = response.data
    axios.get(".../" + response.data.clientID)
    .then(response => this.client = response.data
})
.catch(e => console.log(e))

【讨论】：