/**
* axios封装
* 请求拦截、响应拦截、错误统一处理
*/
import axios from 'axios'
import router from '../router';
import api from './request_api.js'
import Cookies from 'js-cookie'
import {
getToken,removeToken
} from '@/utils/auth'
import { Toast } from 'vant';
import store from '../store'
import {
Message,
Notification,
Loading
} from 'element-ui'
import qs from "qs";
import _ from 'lodash';
//loading对象
let loading;
//当前正在请求的数量
let needLoadingRequestCount = 0;
//显示loading
function showLoading(target) {
// 后面这个判断很重要,因为关闭时加了抖动,此时loading对象可能还存在,
// 但needLoadingRequestCount已经变成0.避免这种情况下会重新创建个loading
if (needLoadingRequestCount === 0 && !loading) {
loading = Loading.service({
lock: true,
text: "加载中...",
background: 'rgba(255, 255, 255, 0.7)',
target: target || "body"
});
}
needLoadingRequestCount++;
}
//隐藏loading
function hideLoading() {
needLoadingRequestCount--;
needLoadingRequestCount = Math.max(needLoadingRequestCount, 0); //做个保护
if (needLoadingRequestCount === 0) {
//关闭loading
toHideLoading();
}
}
//防抖:将 300ms 间隔内的关闭 loading 便合并为一次。防止连续请求时, loading闪烁的问题。
var toHideLoading = _.debounce(() => {
if(loading) loading.close();
loading = null;
}, 300);
//process.env.NODE_ENV -> production 生产环境 dev 开发环境
// axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'http://192.168.2.207:10015/api' : 'https://kickstartech.7claw.com/api',
axios.defaults.baseURL = process.env.VUE_APP_API_URL
axios.defaults.timeout = 20000
//设置公共请求头部
// axios.defaults.headers.token = getToken()
// axios.defaults.headers.Authorization= 'Bearer '+ getToken()
// request 拦截器
axios.interceptors.request.use(
config => {
// 登录后的token定义至headers
if (getToken()){
config.headers.token = getToken();
}
let lang = Cookies.get('language') || 'zh'
config.headers.lang = lang == 'en' ? 1 : lang == 'zhHk' ? 2 : lang == 'zh' ? 3 : '';
//判断当前请求是否设置了不显示Loading
if (config.headers.showLoading !== false) {
showLoading(config.headers.loadingTarget);
}
return config;
},
error => {
//判断当前请求是否设置了不显示Loading
if (config.headers.showLoading !== false) {
hideLoading();
}
Message.error({
message: response.data.message || (lang == 'zh' ? '请求超时,请稍后再试' : 'The request timed out. Please try again later')
})
return Promise.reject(error);
}
);
//response 拦截器
axios.interceptors.response.use(
response => {
//判断当前请求是否设置了不显示Loading(不显示自然无需隐藏)
if (response.config.headers.showLoading !== false) {
hideLoading();
}
let lang = Cookies.get('language') || 'zh'
// 请求成功
if (response.data.code === 200 || response.data.code === 0) {
return response;
}
// 登录失效
else if (response.data.code === 203) {
removeToken()
// Message.error({
// message: response.data.message || "出现错误,请稍后再试"
// })
// Notification.error({
// title: lang == 'zh' ? '错误' : 'Error',
// message: response.data.message
// });
Toast.fail(response.data.message);
router.push({
name: "login"
});
return response;
}
// 请求异常
else if (response.data.code === 400) {
// Notification.error({
// title: lang == 'zh' ? '错误' : 'Error',
// message: response.data.message
// });
Toast.fail(response.data.message);
return response;
}else{
// Notification.error({
// title: lang == 'zh' ? '错误' : 'Error',
// message: response.data.message
// });
Toast.fail(response.data.message);
return response;
}
},
error => {
let lang = Cookies.get('language') || 'zh' // 目前语言种类
//判断当前请求是否设置了不显示Loading(不显示自然无需隐藏)
if (error.config.headers.showLoading !== false) {
hideLoading();
}
if (error.response && error.response.data && error.response.data.message) {
var jsonObj = JSON.parse(error.response.data.message);
Message.error(jsonObj.message);
} else {
// Notification.error({
// title: lang == 'zh' ? '错误' : 'Error',
// message: error.message || (lang == 'zh' ? '请求超时,请稍后再试' : 'The request timed out. Please try again later')
// });
Toast.fail(error.message || '请求超时,请稍后再试');
}
return Promise.reject(error);
}
);
/*
* 封装get方法
* @param url 地址
* @param params 参数
* @param loading 不传 -> 默认全屏loading效果, false -> 取消loading效果, '#id' or '.class' -> 指定区域loading效果
* @returns {Promise}
*/
export function get(url, params = {},loading,showLoading,loadingTarget) {
if(typeof(loading) == 'boolean' && loading != false){
showLoading = loading
loadingTarget = 'body'
}else if(typeof(loading) == 'string'){
showLoading = true
loadingTarget = loading
}else if(loading == false){
showLoading = false
loadingTarget = 'body'
}else{
showLoading = true
loadingTarget = 'body'
}
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params,
headers: {'showLoading':showLoading,"loadingTarget":loadingTarget }
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err);
});
});
}
/*
* 封装post请求
* @param url
* @param data
* @param loading
* @returns {Promise}
*/
// json格式
export function post(url, data,loading,showLoading,loadingTarget) {
if(typeof(loading) == 'boolean'){
showLoading = loading
loadingTarget = 'body'
}else if(typeof(loading) == 'string'){
showLoading = true
loadingTarget = loading
}else if(loading == false){
showLoading = false
loadingTarget = 'body'
}else{
showLoading = true
loadingTarget = 'body'
}
return new Promise((resolve, reject) => {
axios.post(url, qs.stringify(data),{headers: { "Content-Type": "application/x-www-form-urlencoded",'showLoading':showLoading,"loadingTarget":loadingTarget }}).then(
response => {
resolve(response.data);
},
err => {
reject(err);
}
);
});
}
// formData格式
export function From(url, data,loading,showLoading,loadingTarget) {
if(typeof(loading) == 'boolean'){
showLoading = loading
loadingTarget = 'body'
}else if(typeof(loading) == 'string'){
showLoading = true
loadingTarget = loading
}else{
showLoading = true
loadingTarget = 'body'
}
return new Promise((resolve, reject) => {
axios
.post(url, qs.stringify(data), {
headers: { "Content-Type": "application/x-www-form-urlencoded" }
})
.then(
response => {
resolve(response.data);
},
err => {
reject(err);
}
);
});
}
/*
JSON格式
* 封装post请求
* @param url
* @param data
* @param loading
* @returns {Promise}
*/
// json格式
export function postJson(url, data,loading,showLoading,loadingTarget) {
if(typeof(loading) == 'boolean'){
showLoading = loading
loadingTarget = 'body'
}else if(typeof(loading) == 'string'){
showLoading = true
loadingTarget = loading
}else if(loading == false){
showLoading = false
loadingTarget = 'body'
}else{
showLoading = true
loadingTarget = 'body'
}
return new Promise((resolve, reject) => {
axios.post(url, data,{headers: { "Content-Type": "application/json",'showLoading':showLoading,"loadingTarget":loadingTarget }}).then(
response => {
resolve(response.data);
},
err => {
reject(err);
}
);
});
}
封装request
最新推荐文章于 2024-05-14 17:56:47 发布