过滤判断请求参数中是否是有字符串、空对象、空数组、null、undefined、NaN中的一个,不包含数字0
一、npm安装 lodash 包
二、request.js 请求拦截配置
point:
1、请求拦截器中添加对 params / data 传参的空值判断
2、针对文件上传类的接口,需要屏蔽空值校验,否则会出错。------ 如在文件上传类的接口当中添加 noEmptyCheck 字段,过滤校验。
import axios from 'axios';
import { pickBy } from 'lodash';
import { isEmpty } from '@/utils/utils';
// 创建 axios 实例
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL,
// 超时
timeout: 30000
});
// 添加请求拦截器
service.interceptors.request.use(
(config) => {
// 是否需要设置 token,如果请求中自带了Authorization,就不向cookie中取
const isToken = !!(config.headers || {}).Authorization;
// 在发送请求之前做些什么 token
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
}
// 传参时如果为空或null,不传该字段
// 【注】:这里不用lodash的isEmpty,因为空格和数字0无法正确判断
if(!config.noEmptyCheck) {
if(config.params) {
config.params = pickBy(config.params, parameter => !isEmpty(parameter));
}
if(config.data) {
config.data = pickBy(config.data, parameter => !isEmpty(parameter));
}
}
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 导出 axios 实例
export default service;
/**
* 判断某个值是否是空字符串、空对象、空数组、null、undefined、NaN中的一个,不包含数字0
* @param {*} val
*/
export function isEmpty(val) {
let flag = false;
const type = Object.prototype.toString.call(val);
switch (type) {
// 空字符串
case '[object String]':
if(val.trim() === '') {
flag = true;
}
break;
// null
case '[object Null]':
flag = true;
break;
// undefined
case '[object Undefined]':
flag = true;
break;
// NaN
case '[object Number]':
if(isNaN(val)) {
flag = true;
}
break;
// 空数组
case '[object Array]':
if(val.length === 0) {
flag = true;
}
break;
// 空对象
case '[object Object]':
if(Object.keys(val).length === 0) {
flag = true;
}
break;
}
return flag;
}