axios是vue2.x版本官方推荐使用的基于 promise 的 HTTP 库,其与ajax相比具有很多优点。
部署:
1、打开cmd,cd进入工程目录文件夹
2、npm install axios
使用:
引用分为全局引用和局部引用,这里为了方便使用的是全局引用
1、在工程中的入口函数main.js引入,输入import axios from 'axios';//全局引入的方式
,在main.js的代码下面输入Vue.prototype.$axios = axios;//修改原型链
,这时候就可以在vue的各组件中通过this.$axios
来使用axios
读取json及跨域处理
使用一个按钮,当点击按钮的时候,读取json文件内容,代码如下: 任意一个组件中:
<template>
<div id="testa">
{
{
name }}
<br />
<button class="a">看下面</button>
<button class="a" @click="send()">axios请求</button>
<ul>
<li v-for="(v, k) in name" :key="k" :class="{ a1: flag1, a2: flag2 }" @click="change()">{
{
k }} {
{
v | addzero }}</li>
</ul>
<br />
</div>
</template>
<script>
export default {
name: 'test',
data() {
return {
name: [2, 3, 6, 87, 5, 1, 35, 12],
flag1: true,
flag2: false
};
},
methods: {
change() {
this.flag1 = !this.flag1;
this.flag2 = !this.flag2;
},
send(){
this.$axios({
method: 'get',
url: '/api/Simport/js/modules/layerlist/tree.json'
}).then(function(res){
console.log(res);
});
}
},
filters: {
addzero(data) {
var newdata;
data < 10 ? newdata='0' + data :newdata=data;
return newdata;
}
}
};
</script>
<style>
.a {
width: 100px;
height: 50px;
}
.a1 {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
.a2 {
cursor: pointer;
background-color: white;
color: black;
}
</style>
代码中在template下创建了一个button,并添加了点击事件send()
,在js中创建send()方法,axios就写在里面。 在浏览器中使用axios可能会报跨域问题,这是因为json文件的url所在的端口号与vue项目的端口号不一致,例如本例中json文件的url为http://localhost:8080/Simport/js/modules/layerlist/tree.json
,vue项目部署在http://localhost:8081
上。 解决办法: 在vue.config.js
中配置如下:
devServer: {
port: 8080, // 端口号
host: 'localhost',
https: false, // https:{type:Boolean}
open: false, //配置自动启动浏览器
proxy: {
'/api': {
target: 'http://localhost:8080', //后台接口
//ws: true, //如果要代理websockets
changeOrigin: true, //将选项changeOrigin设置true为基于名称的虚拟托管站点。
pathRewrite: {
// 路径重写,
'^/api': '/' // 替换target中的请求地址,也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
}
}
}
}
最主要的是proxy,这是专门设置跨域的类,这样设置后,我们就可以通过'/api/Simport/js/modules/layerlist/tree.json'
这个路径来访问json 下面是效果图:
点击后在console中显示如下:
到这里最基础的就完成了,后续的使用方法会陆续更新。
附上axios文档网站:
https://www.kancloud.cn/yunye/axios/234845
https://github.com/axios/axios