在common文件夹中新建axios.js
// 使用数据拦截器
import axios from 'axios';
import Qs from 'qs';
import { Notify } from 'vant';
axios.defaults.timeout = 5000;
//填写域名
axios.defaults.baseURL =urlObj[sceneParam];
//http request 拦截器 客户端给服务端的数据
axios.interceptors.request.use(
config => {
config.headers.common = {
'Authorization': localStorage.getItem('token'),
'version': '1.0',
'Content-Type': 'application/json;charset=UTF-8'
}
if (config.data && config.data.isFormData) {
config.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
//转化成formData格式
// transformRequest只能用在 PUT, POST, PATCH 这几个请求方法
config.transformRequest=[function (data) {
delete data.isFormData;
var res = Qs.stringify(data);
return res;
}]
}
return config;
},
error => {
return Promise.reject(error);
}
);
//响应拦截器即异常处理 - -- 服务给客户端的数据进行处理
axios.interceptors.response.use(response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
// return response
}, err => {
if (err && err.response) {
var errorMsg = '';
switch (err.response.status) {
case 400:
console.log('错误请求')
errorMsg = '错误请求';
break;
case 401:
console.log('未授权,请重新登录');
errorMsg = '未授权,请重新登录';
break;
case 403:
console.log('拒绝访问')
errorMsg = '拒绝访问';
break;
case 404:
console.log('请求错误,未找到该资源')
errorMsg = '请求错误,未找到该资源';
break;
case 405:
console.log('请求方法未允许')
errorMsg = '请求方法未允许';
break;
case 408:
console.log('请求超时')
errorMsg = '请求超时';
break;
case 500:
console.log('服务器端出错')
errorMsg = '服务器端出错';
break;
case 501:
console.log('网络未实现')
errorMsg = '请求方法未允许';
break;
case 502:
console.log('网络错误')
errorMsg = '网络错误';
break;
case 503:
console.log('服务不可用')
errorMsg = '服务不可用';
break;
case 504:
console.log('网络超时')
errorMsg = '网络超时';
break;
case 505:
console.log('http版本不支持该请求')
errorMsg = 'http版本不支持该请求';
break;
default:
console.log(`连接错误${err.response.status}`)
}
} else {
console.log('连接到服务器失败')
errorMsg = '连接到服务器失败';
}
return Promise.resolve(err.response)
})
export default {
//post请求
post(url,params){
return axios.post(url,params)
.then((response)=>{
if(response && response.status==200){
return Promise.resolve(response.data.data);
}
})
},
//异步get请求
async get(url,params={}){
var res = await axios({
method: 'get',
url:url,
params: params
});
return res.data.data;
}
}
页面使用方法
可以挂载在原型链上,使用this.$axios访问。
import axios from '../common.axios.js'
axios.get(this.$api.web,{
userid:'',
token:''
}).then((data)=>{
console.log(data)
});
若有疑问,欢迎留言,谢谢支持!