CODEWITHSUNDEEP
vuejs2axiosvuexnuxt.js
Ahmad Abed
Ahmad Abed

Reputation: 128

Call API with Another Api response data in Nuxtjs

Im making a website with Nuxtjs, i want when i open any page of the website to get user information from the server using Axios, and i want to use these information to call another API's from the website.
For example: i will get the User id and Client id from the server and use them on the API URL, lets say i got User id = 5, Client id = 10 i will call another API's and use these informations 

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


Now my problem is the second API call before the first API finished so i didn't got the user informations yet.
Could you please help me with this issue, note that i want to get the user information on all pages. so if i reload the page in any page i want to get user informations.
So i call the user information API from a Layout and call the other API's from another components.

Thanks.

Upvotes: 0

Views: 2865

Answers (1)

Jefry Dewangga
Jefry Dewangga

Reputation: 849

First you should use Axios module officially provided by Nuxt.js here, https://github.com/nuxt-community/axios-module. They have make the integration between Axios and Nuxt.js easier.

Axios uses promise so you can easily chaining method to do it. Let say you wanna get information from /get/product with data gotten from the url you mention before http://****/getItems?userid=5&clientid=10, you can easily do that like this

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

Explanation

This part,

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

the axios will get the data from the url provided, when the data is received, we can use it within then() block as it accept callback as a parameter.

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

After that, if you wanna use your data you can easily return the axios request again with proper parameter you wanna send.

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

And again you can use the data received from second axios request within then() block.

  .then(data => {
    // You can use your data received from second request here.
    console.log(data)
  })

Updated

Oke, based on the clarification on the comment section below. We can return the axios promise in first action and then on the second method we can dispatch the first action,

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

Using that way, you just need to put the callSecond() action whereever you want get the second data. And you also don't need to put the callFirst() action on default.vue.

Upvotes: 1

Related Questions