vue axios 请求过滤空值

ops/2024/9/22 22:39:13/

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


一、npm安装 lodash 包

二、request.js 请求拦截配置

point:请求拦截器中添加对 params / data 传参的空值判断

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;// 在发送请求之前做些什么 tokenif (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改}// 传参时如果为空或null,不传该字段// 【注】:这里不用lodash的isEmpty,因为空格和数字0无法正确判断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;// nullcase '[object Null]':flag = true;break;// undefinedcase '[object Undefined]':flag = true;break;// NaNcase '[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;
}

http://www.ppmy.cn/ops/37220.html

相关文章

从零开始的软件测试学习之旅(七)接口测试三要素及案例

接口测试三要素及案例 接口测试介绍接口预定义接口测试的主要作用测试接口流程如下接口测试三要素接口测试分类RESTful架构风格RESTful架构三要素要素一要素二要素三 RESTful架构风格实现案例复习复盘 接口测试介绍 接口介绍 不同主体之间进行通信的通道,它应具有一套规范/标准…

LeetCode题练习与总结:合并两个有序数组--88

一、题目描述 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2,另有两个整数 m 和 n ,分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中,使合并后的数组同样按 非递减顺序 排列。 注意:最终&#xf…

使用npm script运行webpack

npm(Node Package Manager)是 Node.js 的包管理工具,用于安装、发布和管理 Node.js 包。 在安装node的时候,就默认安装了npm。 Npm Script 则是 Npm 内置的一个功能,允许在 package.json 文件里面使用 scripts 字段定…

分布式与一致性协议之ZAB协议(六)

ZAB协议 成员发现 成员发现是通过跟随者和领导者交互来完成的,目标是确保大多数节点对领导者的关系没有异议,也就是确立领导者的领导地位。成员发现的实现流程如图所示。 1.领导者选举结束,节点进入跟随者状态或者领导者状态后&#xff0…

ArrayList和LinkedList的区别

ArrayList 和 LinkedList 都是 Java 中提供的用于存储一组元素的集合框架(Collection Framework)中的类,它们都实现了 List 接口。然而,它们在内部实现、性能特性以及使用场景上存在显著的区别。 一、主要区别 内部实现&#xff…

Facebook之道:探索社交媒体领域的未来

随着科技的不断发展,社交媒体已经成为我们日常生活中不可或缺的一部分。而在这个领域中,Facebook一直是引领者和领头羊。然而,随着时间的推移,社交媒体领域正在发生着翻天覆地的变化,而Facebook又将何去何从&#xff1…

Conda下Richdem包遇到问题

Conda中Richdem包遇到问题 文章目录 Conda中Richdem包遇到问题问题一报错解决 问题二报错解决 参考 问题一 报错 RichDEM 是一套数字高程模型 (DEM) 水文分析工具,这次打算用richdem进行地形分析,尝试在conda里面安装richdem包的…

C++:string类(第二章)

hello,各位小伙伴,本篇文章跟大家一起学习《C:string类》,感谢大家对我上一篇的支持,如有什么问题,还请多多指教 ! 如果本篇文章对你有帮助,还请各位点点赞!!…