0

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.

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for your answer, but i want to call the first API just once, so i call it on the default.vue layout file, so the first API will excecute on every route i go to that have this layout, i store the first API response on my Vuex Store, but still when i reload the page and get the Vuex State i got undefined but when i open the Vuejs dev tools i check my Vuex State i see the data there, so when i call the second API the first one didnt finished yet.
Sorry but, I still didn't get your point. When will the second API be called? I understand it should be called after the first one done. But can you make more specific about the second one? Or maybe you can attach any reproduction link to trace your code easier.
Ok, i will call the first API when any page is loaded to get the user id, and then in any component i want to call another API, lets say i want to get the user posts or something, so the second API url is http://****/getPosts?userid=10 , the first API i call it on the default layout file, the second API i will call it on any other component

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.