vue axios 请求过滤空值

过滤判断请求参数中是否是有字符串、空对象、空数组、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;
}
相关推荐
吞掉星星的鲸鱼38 分钟前
使用高德api实现天气查询
前端·javascript·css
....49242 分钟前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
TDengine (老段)5 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
再学一点就睡6 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
難釋懷8 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠8 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机8 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
bst@微胖子9 小时前
Flutter项目之登录注册功能实现
开发语言·javascript·flutter
拉不动的猪9 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试