axios使用说明文档
vue-cli2中axios 全局配置：
需要自己新建一个配置文件（如：axios-init.js），我是直接在config目录下新建的。
//axios-init.js
import axios from 'axios';
axios.defaults.baseURL = env === 'development' ? '/api' : window.location.protocol + '//' + window.location.host; // 配置axios请求的地址
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
axios.defaults.crossDomain = true;
axios.defaults.withCredentials = true; //设置cross跨域 并设置访问权限 允许跨域携带cookie信息
//配置发送请求前的拦截器 可以设置token信息
axios.interceptors.request.use(
config => {
// 这里配置全局loading
if (!(/\.json/.test(config.url))) {
$('#screen').show() // 这个div控制loading动画，项目中有对json的请求，所以这里区分是否是json文件
}
return config
}, error => {
return Promise.reject(error)
}
)
// 配置响应拦截器
axios.interceptors.response.use(
res => {
$('#screen').hide() // loading结束
return Promise.resolve(res.data) // 这里直接返回data, 即接口返回的所有数据
}, error => {
$('#screen').hide();
tooltip('', '连接错误！', 'error');
// 判断是否登录失效，按照实际项目的接口返回状态来判断
if (error.toString().includes('776')) {
window.location.href = window.location.origin + '/#/login'
}
return Promise.reject(error);
}
)
export default axios
最后在main.js里面引入
import VueAxios from 'vue-axios' // 报错的话则npm安装依赖
import axios from './../config/axios-init'
Vue.use(VueAxios, axios)
页面使用：
// get
this.axios.get('/api/url').then((data) => {
if (data.success) {
this.initPage(data.obj)
}
})
// post
var data = { 'name': this.editName, 'id': item.id }
this.axios.post('/api/edit', data).then((res) => {
tooltip('', '操作成功！', 'success')
})
vue-cli3中引入axios：
- 直接使用命令：vue add axios
然后便会自动生成axios.js 文件（在plugins目录下），并在main.js中自动引入。在vue-cli2中这两步为手动添加，vue-cli3则自动添加好了 - 所以只需要配置axios.js内的拦截即可，大体配置内容和上文的axios-init.js差不多
-
配置代理
vue-cli2中是在config目录下的index.js 文件中配置；而vue-cli3则是在vue.config.js（手动新增）中配置。
// vue-cli2 配置举例，config/index.js中
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// 配置代理
proxyTable: {
'/api': {
target: 'http://192.168.1.160:9999',
changeOrigin: true, // 是否允许跨越, 开发环境中使用
pathRewrite: {
'^/api': ''
}
}
}
// ....
}
// vue-cli3 配置举例， vue.config.js中
devServer: {
proxy: {
"/api": {
target: "http://192.168.1.160:9999",
changeOrigin: true, // 是否允许跨越, 开发环境中使用
pathRewrite: {
"^/api": ""
}
}
}
}
