接口请求参数去空

四维虫子chenjd

已于 2022-09-06 11:24:26 修改

阅读量283

点赞数

文章标签： javascript

于 2021-09-04 17:49:24 首次发布

本文链接：https://blog.youkuaiyun.com/m0_51499501/article/details/120103178

版权

这篇博客介绍了如何在Utils模块中定义一个函数`cleanObject`用于清除对象中的空值，然后结合`qs`库将处理后的参数转换为查询字符串，用于API请求。在React的useEffect钩子中，展示了如何利用这些工具函数来实现动态更新参数并发送GET请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在utils的index.js中写入：
export const isFalsy = (value) => value === 0 ? false : !value

export const cleanObject = (object: any) => {
const result = { …object }
Object.keys(result).forEach(key => {
const value = result[key]
if(isFalsy(value)) {
delete result[key]
}
})
return result
}

2.引入qs（npm 仓库所管理的包）
yarn add qs

3.使用
import { cleanObject } from ‘…/…/utils’
import * as qs from ‘qs’

const [param, setParam] = useState({
name: ‘’,
personId: ‘’
})
useEffect(() => {
console.log(‘apiUrl：’, apiUrl)
fetch(${apiUrl}/projects?${qs.stringify(cleanObject(param))}).then(async res => {
if (res.ok) setList(await res.json())
})
}, [param])