1.request.js
/**axios封装
* 请求拦截、相应拦截、错误统一处理
*/
import axios from 'axios'
import QS from 'qs'
// import store from "../../store/index";
import router from '../../router/index'
import db from '../../common/storage'
import {
Message,
MessageBox
} from 'element-ui'
// 环境的切换
if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = process.env.VUE_APP_API_URL1
} else {
axios.defaults.baseURL = ""
}
// axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
//
// 请求超时时间
axios.defaults.timeout = 100000
// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
const token = db.ss.get('token')
token && (config.headers.token = token)
// 设置url的前缀
config.url = process.env.VUE_APP_URL_PORT + config.url
if (config.url.indexOf("/sys/login") !== -1 && config.method == 'post') {
config.data = QS.stringify(config.data)
} else if (config.method == 'get') {
config.params = {
...config.params,
_t: Date.parse(new Date()) / 1000
}
}
return config
},
error => {
return Promise.error(error)
}
)
// 响应拦截器
let timer = false
let path = '/login'
axios.interceptors.response.use(
response => {
if (response.status === 200) {
if (response.data.code == 401) {
if (!timer) {
timer = setTimeout(() => {
MessageBox.alert('登录信息已过期，点击确认跳转至登录页', '提示', {
confirmButtonText: '确认',
callback: action => {
if (action === 'confirm') {
clearTimeout(timer)
timer = null
setTimeout(() => {
router.replace({
path: path,
query: {
redirect: router.currentRoute.fullPath
}
})
}, 1000)
}
}
})
}, 0)
}
} else {
return Promise.resolve(response)
}
} else {
return Promise.reject(response)
}
},
error => {
if (error.response && error.response.status) {
switch (error.response.status) {
case 401:
router.replace({
path: path
})
break
case 403:
// 清除token
db.ss.clear()
if (!timer) {
timer = setTimeout(() => {
MessageBox.alert('登录信息已过期，点击确认跳转至登录页', '提示', {
confirmButtonText: '确认',
callback: action => {
if (action === 'confirm') {
clearTimeout(timer)
timer = null
setTimeout(() => {
router.replace({
path: path,
query: {
redirect: router.currentRoute.fullPath
}
})
}, 1000)
}
}
})
}, 0)
}
break
// 404请求不存在
case 404:
Message({
message: '请求不存在',
type: 'error'
})
break
default:
Message({
message: error.response.data.message,
type: 'error'
})
}
return Promise.reject(error.response)
}
}
)
/**
* get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
/**
* get方法，下载文件对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function getFile(url, params) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
params,
headers: {
'Content-Type': 'application/json; application/octet-stream'
},
responseType: 'blob',
timeout: 100000
}).then((res) => {
resolve(res)
}).catch(err => {
reject(err.data)
})
})
}
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function postFile(url, params, onUploadProgress) {
return new Promise((resolve, reject) => {
axios
.post(
url,
params, {
timeout: 100000,
onUploadProgress
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
export function put(url, params = {}) {
return new Promise((resolve, reject) => {
axios.put(url, params).then(
response => {
resolve(response.data)
},
err => {
reject(err)
}
)
})
}
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios
.post(url, params)
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function del(url, params) {
return new Promise((resolve, reject) => {
axios
.delete(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
2.使用
import {
get,
put,
post,
del
} from "../api/request";
//新增指标
export const addIndicatorInter = data => {
return post(
`${process.env.VUE_APP_URL_PORT_BASE}/indicator`,
data
);
};
// 获取指标列表
export const getIndicatorListInter = data => {
return get(
`${process.env.VUE_APP_URL_PORT_BASE}/indicator`,
data
);
};