axios封装
请求拦截:请求标记已经存在,则取消本次请求,否则在请求列表中加入请求标记
响应拦截:code==500,统一报错;不同error,不同处理报错
// axios.js
import axios from "axios"
import { Message } from 'gdb-ui';
let requestList = [];
let cancelToken = axios.CancelToken;
// 请求拦截
axios.interceptors.request.use(
(config) => {
config.cancelToken = new cancelToken((cancel) => {
let requestFlag = JSON.stringify(config.url) + JSON.stringify(config.data) + '&' + config.method;
//请求标记已经存在,则取消本次请求,否则在请求列表中加入请求标记
if (requestList.includes(requestFlag)) {
//取消本次请求
cancel();
} else {
requestList.push(requestFlag);
}
});
return config
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截
axios.interceptors.response.use(
(response) => {
let requestFlag = JSON.stringify(response.config.url) + JSON.stringify(response.config.data) + '&' + response.config.method;
requestList.splice(requestList.findIndex(item => item === requestFlag), 1);
if (response.data.code === 500) {
// dialog.message({
// text: response.data.msg,
// })
Message({
message: response.data.msg,
type: 'error',
showClose: true
})
}
return response
},
(error) => {
requestList.length = 0;
// 请求失败
if (error && error.response) {
switch (error.response.status) {
case 400:
// 对400错误您的处理\
break
case 401:
if (error.response.config.isTarget) location.href = "/login.html"
break
case 404:
Promise.reject(error)
break
default:
// 如果以上都不是的处理
return Promise.reject(error)
}
}
}
)
http
封装请求方式
import axios from 'axios';
import { getCookie } from '@/assets/js/utils/cookie';
// import cookieKey from '@/assets/js/config/cookie-key';
var zuulToken = "Z2RiOnp1dWw6MTIzNDU2";
var token = getCookie('pangu_token');
export default {
/**
* get 请求
* @param url 接口路由
* @param auth 是否需要带登录信息
* @returns {AxiosPromise<any>}
* (Your back-end user authenticates information )
* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
* 后端用户验证信息比如(token)
*/
get({ url, data = {}, isTarget = true, responseType }) {
return axios.get(url, { headers: { Authorization: token, ZuulToken: zuulToken }, params: data, isTarget: isTarget, responseType });
},
/**
* post 请求
*
* @param url 接口路由
* @param data 接口参数
* @param auth 是否需要带登录信息
* @returns {AxiosPromise<any>}
*
*/
post({ url, data, responseType }) {
return axios.post(url, data, { headers: { Authorization: token, ZuulToken: zuulToken }, responseType });
},
/**
* put请求
* @param url 接口路由
* @param data 接口参数
* @param auth 是否需要带登录信息
* @returns {AxiosPromise<any>}
*/
put({ url, data }) {
return axios.put(url, data, { headers: { Authorization: token, ZuulToken: zuulToken } });
},
/**
* 删除
* @param url 接口路由
* @param auth 是否需要带登录信息
* @returns {AxiosPromise}
*/
del({ url }) {
return axios.delete(url, { headers: { Authorization: token, ZuulToken: zuulToken } });
},
/**
* 上传文件
* @param url 接口路由
* @param file 接口文件
* @param auth 是否需要带登录信息
*/
uploader({ url, file }) {
let param = new FormData();
param.append('file', file)
return axios.post(url, param, { headers: { Authorization: 'Your back-end user authenticates information' } })
}
};
api
接口
export default {
// 账号登录
login: "/api/user_service/user/login",
// 短信验证码登录
loginvCode: "/api/user_service/user/login_vCode",
// 发送短信验证码
sendLoginCode: "/api/user_service/sms/login_code",
// 生成验证码图片 1:注册 2:登录 3:忘记密码
getVerify: "/api/user_service/verify/getVerify/",
// 获取商品详情
getGoods: "/api/goods_service/goods/detail/"
}