数据"/>
vue获取本地json数据
vue获取本地json数据
最近练习vue的时候,因为是通过vue-cli4搭建的项目,和vue-cli2搭建项目的目录结构不一样。静态文件的放置位置在public文件里。
为了降低模块间的耦合度和方便管理,所以我把axios获取数据给进行了一些列的封装,代码如下:
- 引入axios且创建,进行配置
值得一提的是axios返回值是promise
import axios from "axios";export function request(config) {// 创建axios实例const instance = axios.create({baseURL: "http://localhost:8080", // 路径timeout: 2000})// 发送真正的网络请求return instance(config)
}
- 获取具体的json文件(或者接口)
import {request
} from "./request";export function getChartInfo() {return request({url: "/data/home/chart.json"})
}
- vue文件进行调用
<script>
import { getChartInfo } from "network/home";
export default {name: "Home",data() {return {};},created() {getChartInfo().then(res => { //因为axios返回值是promise,所以可以直接通过then方法获取结构console.log(res.data);});}
};
</script>
- 目录结构
万般皆苦,唯有自渡!
更多推荐
vue获取本地json数据
发布评论