vue axios 哀求过滤空值

过滤判断哀求参数中是否是有字符串、空对象、空数组、null、undefined、NaN中的一个,不包含数字0

---

一、npm安装 lodash 包

二、request.js 哀求拦截配置

point：
1、哀求拦截器中添加对 params / data 传参的空值判断
2、针对文件上传类的接口，必要屏蔽空值校验，否则会出错。—— 如在文件上传类的接口当中添加 noEmptyCheck 字段，过滤校验。

1. import axios from 'axios';
2. import { pickBy } from 'lodash';
3. import { isEmpty } from '@/utils/utils';
5. // 创建 axios 实例
6. const service = axios.create({
7.   // axios中请求配置有baseURL选项，表示请求URL公共部分
8.   baseURL,
9.   // 超时
10.   timeout: 30000
11. });
13. // 添加请求拦截器
14. service.interceptors.request.use(
15.   (config) => {
16.     // 是否需要设置 token,如果请求中自带了Authorization，就不向cookie中取
17.     const isToken = !!(config.headers || {}).Authorization;
18.     // 在发送请求之前做些什么 token
19.     if (getToken() && !isToken) {
20.       config.headers['Authorization'] = 'Bearer ' + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
21.     }
24.     // 传参时如果为空或null，不传该字段
25.     // 【注】：这里不用lodash的isEmpty，因为空格和数字0无法正确判断
26.     if(!config.noEmptyCheck) {
27.         if(config.params) {
28.           config.params = pickBy(config.params, parameter => !isEmpty(parameter));
29.         }
30.         if(config.data) {
31.           config.data = pickBy(config.data, parameter => !isEmpty(parameter));
32.         }
33.     }
34.     return config;
35.   },
36.   (error) => {
37.     // 对请求错误做些什么
38.     return Promise.reject(error);
39.   }
40. );
42. // 导出 axios 实例
43. export default service;

复制代码

1. /**
2. * 判断某个值是否是空字符串、空对象、空数组、null、undefined、NaN中的一个,不包含数字0
3. * @param {*} val
4. */
5. export function isEmpty(val) {
6.   let flag = false;
7.   const type = Object.prototype.toString.call(val);
9.   switch (type) {
10.   // 空字符串
11.   case '[object String]':
12.     if(val.trim() === '') {
13.       flag = true;
14.     }
15.     break;
16.     // null
17.   case '[object Null]':
18.     flag = true;
19.     break;
20.     // undefined
21.   case '[object Undefined]':
22.     flag = true;
23.     break;
24.     // NaN
25.   case '[object Number]':
26.     if(isNaN(val)) {
27.       flag = true;
28.     }
29.     break;
30.     // 空数组
31.   case '[object Array]':
32.     if(val.length === 0) {
33.       flag = true;
34.     }
35.     break;
36.     // 空对象
37.   case '[object Object]':
38.     if(Object.keys(val).length === 0) {
39.       flag = true;
40.     }
41.     break;
42.   }
44.   return flag;
45. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。