如何在我的 Vue.js 项目中使用 Axios 获取 json 数据

Question

我的项目的/src/static/js 目录中有一个server_config.json。

{
  "ApiUrl":"http://localhost:8000"
}

在我的main.js，我想用axios来获取数据：

Vue.prototype.getConfigJson = function () {

  this.$http.get("/static/js/server_config.json").then((response)=> {

    Vue.prototype.ApiUrl = 'http://localhost:8000';
  }).catch((response)=> {

    if (response == null) {
      Vue.prototype.ApiUrl = 'http://localhost:8000';

    }
  });
}

在我的App.vue 中发出函数：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default {
    mounted: function () {
      this.getConfigJson();
    }
  }
</script>

但我无法获取 json 数据，我会抓住这个：

catch((response)=> {}

response 是 undefined。

Answer 1

您可以通过以下方式在任何 Vue 组件或 .js 文件（main.js、store.js 等）中使用 axios：

import axios from 'axios';

axios.get('www').then(res => {// your code})

对于 Vue 文件，请确保您需要在标签内执行此操作：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
    import axios from 'axios';

    export default {
      mounted() {
        axios.get('www').then(res => {// your code})
      }
    }
</script>