Nuxt Js asyncData returning value acting strange.

Question

I am working on a nuxt js/vue js project. In it I have to call multiple REST API. In the page component I am calling the asyncData() nuxt js API to call the REST api.

import { getCategories } from '~/api'
import { getProducts } from '~/api'


export default {

data() {
  return {

  }
},`



asyncData ({ req, params }) {
 //-----------------PART 1-----------------------------
    // var res1 = getCategories()
    // var res2 = getProducts()

    // return {
    //   res1,
    //   res2
    // }
//-----------------PART 2-----------------------------
    // return getCategories()
    // return getProducts()


//----------------------------------------------
      },



created() {

    if(typeof(Storage) !== "undefined"){

      if(!localStorage.getItem("cityName")){
        this.$router.push('/')
      }

    } else{
      console.log('This browser does not support local storage')
    }

    this.$store.dispatch('initFilters')


    this.$store.dispatch('initCategories', this.categories) 

   //NOTICE HERE
   // console.log(this.allProducts) //This one works on single return
   // console.log(this.res1.allProducts) //This doesnot work on object return

  },

}

When I try to return getCategories() or return getProducts() (PART 2 in the code)it works and return my desired object result.

But as I need both object, I tried to put them in an object and return them (PART 1) then calling by console.log(this.res1.allProducts) I am not getting the desired object.

Here is the API code

import axios from 'axios'
const API_ROOT = 'http://deligram.mg/rest/'
const API_VERSION = 'V1'
const MAGENTO_STORE = 'default'
const API_BASE = API_ROOT + '/' + MAGENTO_STORE + '/' + API_VERSION + '/'

const apiUrl = (path) => {
  return API_BASE + path
}

const apiGet = (path) => {
  return axios.get(apiUrl(path))
}

export function getCategories () {
  return apiGet('categories')
  .then((res) => {
    return { categories: res.data }
  })
}

export function getProducts () {
  return apiGet('products?searchCriteria%5BcurrentPage%5D=10')
  .then((res) => {
    return { allProducts: res.data }
  })
}

Can anyone tell me what am I doing wrong? Or can anyone propose an alternative approach to get both object in the single return?

Linus Borg · Accepted Answer · 2017-06-06 10:50:55Z

2

I assume your API methods return a Promise. You should use Promise.all to wait until both promises are resolved, then return one object containing all the data that nuxt should set:

var res1 = getCategories()
var res2 = getProducts()
return Promise.all(re1, res2).then(function ([data1, data2]) {
 return Object.assign({}, data1, data2)
})

the resulting object will look like this:

{
  categories: [ /* data from getCategories() */]
  allProducts: [ /* data from getProducts () */ ]
}

edited Jun 6, 2017 at 10:50

answered Jun 6, 2017 at 9:54

Linus Borg

24.1k7 gold badges65 silver badges52 bronze badges

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

4 Comments

ZIS Over a year ago

Getting this error on: return Object.assign({}, data1, data2) Error: Module build failed: SyntaxError: return is a reserved word

Linus Borg Over a year ago

Oh, that was a typo on my part. Edited my post.

ZIS Over a year ago

Thanks. I guess you got some typo mistake. I fixed it btw. The concept is 100% right. return Promise.all([res1, res2]).then( value => { return Object.assign({}, value[0], value[1]) })

knif3r Over a year ago

asyncData() always expect an async code to run, you can simulate with setTimeout() and callback, you can also return axios in asyncData it willl automatically generate a promise, in general always return promise to asyncData() the logic behind that is simple, it should know how much to wait before rendering the page.

Collectives™ on Stack Overflow

Nuxt Js asyncData returning value acting strange.

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related