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都解决，然后返回一个对象，其中包含 all nuxt应该设置的数据：

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 () */ ]
}

Nuxt Js asyncData返回的值很奇怪。

1 个答案: