1、
vue.config.js中配置如下
module.exports = {
// 选项...
// devtool: 'eval-source-map',//开发调试
devServer: {
port: 8089,
proxy:{
'/apis': {//代理api
target: "http://999.138.2.133:8080",//服务器api地址
changeOrigin: true,//是否跨域
pathRewrite: {//重写路径
"^/apis": ''
}
}
}
},
configureWebpack: {//引入jquery
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
},
}在页面中请求的方法
this.axios.get('/apis/ithil_j/activity/movie_annual2017').then(res => {
console.log(res.data)
}, res => {
console.info('调用失败');
})一个较全面的axios封装
import axios from 'axios';
import Qs from 'qs';//用于表单提交数据格式
//以下是新加
import { MessageBox, Message } from 'element-ui';
import store from '@/store';
import { getToken } from '@/utils/auth';
// import { SSL_OP_ALLOW_UNSAFE_LEGACY_RENEGOTIATION } from 'constants'; let env = process.env.NODE_ENV;
let root = '';
let loading; if (env === 'development') {
console.log("api");
} else if (env === 'production') {
console.log("pro");
root = '';
} else {
throw '请检查process.env.NODE_ENV的值，是否符合这些值之一：development，production';
} Date.prototype.format = function (fmt) {
var o = {
"y+": this.getFullYear(),
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds() //秒
};
if (!fmt) {
fmt = 'yyyy-MM-dd HH:mm:ss';
}
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
} // 自定义判断元素类型JS
function toType(obj) {
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
} // 参数过滤函数
function filterNull(o) {
for (var key in o) {
if (o[key] === null) {
delete o[key];
}
if (toType(o[key]) === 'string') {
o[key] = o[key].trim();
} else if (toType(o[key]) === 'date') {
o[key] = (o[key].format());
} else if (toType(o[key]) === 'object') {
o[key] = filterNull(o[key]);
} else if (toType(o[key]) === 'array') {
o[key] = filterNull(o[key]);
}
}
return o;
} function apiAxios(method, url, params, success, failure, authFail) {
console.log('url:' + url);
if (params) {
params = filterNull(params);
} var base = "";
if (url.indexOf(".html") != -1) {
base = "";
} else {
base = root;
} //请求拦截(必须放在配置axios前面)
axios.interceptors.request.use(config=>{
console.log("请求拦截");
config.headers['X-Token'] = 'token';//假数据
return config;
},error=>{
// 请求错误回调
console.log(error) // for debug
});
//响应拦截(必须放在配置axios前面)
axios.interceptors.response.use(response=>{
console.log("响应拦截")
return response;
},error=>{
console.log(error);
}) //配置axios
axios({
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
transformRequest: [function(data) {//在请求之前对data传参进行格式转换
loading= layer.load(2, {//请求未成功时出现loading页 ,3代表一中效果
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
data = Qs.stringify(data);
return data;
}],
method: method,
url: url,
data: method === 'POST' || method === 'PUT' || method === 'DELETE' ? params : null,
params: method === 'GET' ? params : null,
baseURL: base,
withCredentials: true,//跨域请求时发送cookie
timeout: 5000, //过期时间
}).then(function (res) {
if (res.status >= 200 && res.status <= 210 ) {
if (success) {
success(res);
layer.close(loading);//关闭loading效果
}
} else {
//不走
// window.alert('error: ' + JSON.stringify(res.data));
}
}).catch(function (err) {
console.log(err)
if(failure){
failure();
}
// let res = err.response;
// if (err && res) {
// console.log(res.status);
// if (res.status == 504) {
// // alert.eduToast("服务器连接失败!请检查您的网络或服务器!!",2000);
// return;
// } else if (res.status == 401) {
// console.log('------------------:status'+res.status);
// console.log('------------------:authFail'+authFail);
// }
// if (failure) {
// failure(res);
// } else {
// // alert.eduToast(res.data,2000);
// }
// } else {
// if(authFail){
// // localStorage.setItem('login', '');
// }else{
// console.log(err);
// }
// }
}); } // 返回在vue模板中的调用接口
export default {
get: function (url, params, success, failure,authFail) {
return apiAxios('GET', url, params, success, failure,authFail);
},
post: function (url, params, success, failure) {
return apiAxios('POST', url, params, success, failure);
},
put: function (url, params, success, failure) {
return apiAxios('PUT', url, params, success, failure);
},
delete: function (url, params, success, failure) {
return apiAxios('DELETE', url, params, success, failure);
},
initHeader: function () {
console.log('------------------:initHeader');
}
};