javascript - Nuxt Js asyncData 返回值表现得很奇怪。

Question

我正在开发一个 nuxt js/vue js 项目。在其中我必须调用多个 REST API。在页面组件中，我调用 asyncData() nuxt js API 来调用 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

  },

}

当我尝试返回 getCategories() 或返回 getProducts()(代码中的第 2 部分)时，它会起作用并返回我想要的对象结果。

但是由于我需要这两个对象，所以我尝试将它们放入一个对象中并返回它们(第 1 部分)，然后通过 console.log(this.res1.allProducts) 调用我没有得到想要的对象。

这是API代码

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

谁能告诉我我做错了什么？或者任何人都可以提出一种替代方法来在单个返回中获取两个对象？

Answer 1

我假设您的 API 方法返回一个 Promise。您应该使用 Promise.all 等待两个 Promise 都得到解决，然后返回一个包含 nuxt 应设置的数据的对象: p>

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

生成的对象将如下所示:

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