axios处理请求拦截器,响应拦截器,请求封装
request.js
import axios from 'axios';
import { Message } from 'element-ui';
const service = axios.create({
baseURL: 'http://192.168.30.110:8008/',
// baseURL: 'http://192.168.30.59:8008/',
timeout: 10000 // request timeout
});
// http 请求拦截器
service.interceptors.request.use(
config => {
const { token } = window;
if (token) {
config.headers.token = token;
}
return config;
},
error => Promise.reject(error)
);
function handleSuccess(response) {
if (!response.success) {
let message = response.mes || response.message || response.error;
message = message.slice(0, 100);
Message({
type: 'error',
duration: 3000,
message
});
}
return response;
}
// http 响应拦截器
service.interceptors.response.use(
// eslint-disable-next-line consistent-return
response => {
if (response.status <= 299 && response.status >= 200) {
return handleSuccess(response.data);
}
Message({
type: 'error',
duration: 3000,
message: '请求错误'
});
},
error => {
if (error.response) {
const { data } = error.response;
let message = data.message || data.msg || data.error;
message = message.slice(0, 100);
Message({
type: 'error',
duration: 3000,
message
});
}
return Promise.reject(error);
}
);
export default service;
使用:
this.$request({
method: 'post',
url: `paas/api/exe/prod/${this.featureName}/save`,
data: { 0: [data], extr: {topicId: this.topicId} }
}).then((res) => {}) .catch((error) => {
this.$message({
message: '提交失败',
type: 'error',
})
console.log(error)
})
main.js
直接挂载在vue全局上
import request from '@/utils/request.js';
Vue.prototype.$request = request;