有没有办法使用 vue 和 axios 获取和引用两个或多个本地 json 文件答案

【问题标题】：Is there a way to get and ref two or more local json file using vue and axios有没有办法使用 vue 和 axios 获取和引用两个或多个本地 json 文件
【发布时间】：2019-09-07 19:54:21
【问题描述】：

我正在使用 vue 来制作一些 html 组件的原型。有没有办法让 vue 识别两个 json 文件？

vue.js

var vm = new Vue({
  el: '#douglas-laing',
   data: {
    products: [],
    contentPanels: []
},

created() {
axios
  .get( `products.json`, `contentPanel.json`)
  .then(response => {
    // JSON responses are automatically parsed.
    this.products = response.data;
    this.contentPanels = response.data;
  })
},

computed: {


}, // end computed

  methods: { }

});

在html中

<template v-for="contentPanel in contentPanels">
    {{ contentPanel.description }}
</template>

在json文件中

  [
      {
        "description": "this is a content panel test",
      }
  ]

【问题讨论】：

我认为 axios 是一个基于 http 的承诺。所以它需要一个有效的路由 url 参数才能使用 get 方法获取数据。如果你可以给它一个本地的 json 文件，我想知道。
Promise All with Axios的可能重复

标签： javascript html vue.js axios

【解决方案1】：

你可以用 axios.all() 来做到这一点，比如：

methods: {
    getProducts() {
        return axios.get('/products.json');
    },
    getContentPanel() {
        return axios.get('/contentPanel.json');
    }
},
created(){
    axios.all([this.getProducts(), this.getContentPanel()])
    .then(axios.spread(function (products, contentPanel) {
        // Do something with the values
    }));
}

【讨论】：

【解决方案2】：

知道了

创建（）{ axios .get(products.json) .then（响应 => { // JSON 响应会被自动解析。 this.products = response.data; }) axios .get(contentPanel.json) .then（响应 => { // JSON 响应会被自动解析。 this.contentPanels = response.data; }) },

【讨论】：