Vuejs2 使用Nuxtjs中的另一个API响应数据调用API

我正在用Nuxtjs创建一个网站，我想在打开网站的任何页面时，使用Axios从服务器获取用户信息，我想使用这些信息从网站调用另一个API。 例如：我将从服务器获取用户id和客户端id，并在API URL上使用它们，假设我获取了用户id=5，客户端id=10 我将调用另一个API并使用这些信息

http://****/getItems?userid=5&clientid=10

现在我的问题是在第一个API完成之前的第二个API调用，所以我还没有得到用户信息。 你能帮我解决这个问题吗？请注意，我想获得所有页面上的用户信息。因此，如果我在任何页面中重新加载该页面，我希望获得用户信息。 因此，我从一个布局调用用户信息API，并从另一个组件调用其他API

---

谢谢。

首先，您应该在此处使用Nuxt.js正式提供的Axios模块。它们使得Axios和Nuxt.js之间的集成更加容易

Axios使用promise，所以您可以轻松地使用链接方法来实现。假设您想从/get/product获取信息，并从http://**/getItems？userid=5&clientid=10之前提到的url获取数据，您可以很容易地这样做

this.$axios.$get('/getItems?userid=5&clientid=10')
  .then(data => {
    // You can use your data received from first request here.
    return this.$axios.$post('/get/product', {
      id: data.id,
      clientId: data.clientId
    })
  })
  .then(data => {
    // You can use your data received from second request here.
    console.log(data)
  })

解释 这部分,

this.$axios.$get('/getItems?userid=5&clientid=10')

axios将从提供的url获取数据，当接收到数据时，我们可以在then块中使用它，因为它接受回调作为参数

.then(data => {
  // You can use your data received from first url here.
  ...
})

之后，如果您想使用数据，可以使用您想要发送的适当参数轻松地再次返回axios请求

return this.$axios.$post('/get/product', {
  id: data.id,
  clientId: data.clientId
})

同样，您可以在then块中使用从第二个axios请求接收的数据

更新 Oke，基于以下评论部分的澄清。我们可以在第一个动作中返回axios承诺，然后在第二个方法中我们可以发送第一个动作

actions: {
  callFirst ({ commit }) {
    return this.$axios.$get('/get/first')
      .then(firstResult => {
        commit('SET_FIRST', firstResult)
        return firstResult
      })
  },
  callSecond ({ dispatch, commit }) {
    return dispatch('callFirst').then(firstResult => {
      return this.$axios.$post(`/get/${firstResult.userId}`)
        .then(secondResult => {
          commit('SET_SECOND', secondResult)
          return secondResult
        })
    })
  }
}

---

使用这种方式，您只需要将callSecond操作放在您想要获取第二个数据的任何位置。您也不需要将callFirst操作放在default.vue上。

谢谢您的回答，但我只想调用第一个API一次，所以我在default.vue布局文件上调用它，所以第一个API将在我使用此布局的每个路由上都非常有效，我将第一个API响应存储在Vuex存储上，但是，当我重新加载页面并获取Vuex状态时，我仍然没有定义，但是当我打开Vuejs开发工具时，我检查了Vuex状态，我看到了那里的数据，所以当我调用第二个API时，第一个API还没有完成。对不起，我仍然没有理解你的意思。什么时候调用第二个API？我知道应该在第一次完成后调用它。但是你能更具体地说明第二个问题吗？或者，您可以附加任何复制链接以更轻松地跟踪代码。好的，当加载任何页面时，我将调用第一个API以获取用户id，然后在任何组件中，我想调用另一个API，假设我想获取用户帖子或其他内容，因此第二个API url是http://***/getPosts？userid=10，我在默认布局文件上调用的第一个API，我将在任何其他组件上调用的第二个API

actions: {
  callFirst ({ commit }) {
    return this.$axios.$get('/get/first')
      .then(firstResult => {
        commit('SET_FIRST', firstResult)
        return firstResult
      })
  },
  callSecond ({ dispatch, commit }) {
    return dispatch('callFirst').then(firstResult => {
      return this.$axios.$post(`/get/${firstResult.userId}`)
        .then(secondResult => {
          commit('SET_SECOND', secondResult)
          return secondResult
        })
    })
  }
}