vue中使用axios获取数据

关于vue中使用axios

安装axios

npm i axios

在main.js中写入Vue.prototype.$axios = axios

vue中可以使用vuex里面的actions来异步获取数据

我下面是直接写了一个异步方法

两者道理一样

将以下内容复制到vue.config.js

module.exports = {
  //assetsDir: 'public', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  //publicPath: '/', //部署应用包时的基本 URL。  
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    host: 'localhost', //
    port: 8080, //
  },
}

我的json文件夹放在pullic下面

方法获取数据

路径是绝对定位否者报错

 getData() {

   this.$axios.get("/data/data.json").then((res) => {

  此时相当于访问 http://localhost:8080/chinaData/100000.json

   console.log(res.data.index.nav[0]);

   });

   }

  async getData(*context*, *payload*) {

   const ret=await axios.get('/data/data.json')

   console.log(ret, *payload*,*context*);

  }