umi3项目axios 请求参数序列化参数

由于get 请求中有一个日期参数 dates 是一个数组类型。

未处理参数时请求地址是这样的:/api/list?page=1&pageSize=10&keyWord=&dates[]=2024-06-10&dates[]=2024-06-24

会发现dates后面有中括号,所以前端需要将参数格式处理变成如下:/api/list?page=1&pageSize=10&keyWord=&dates=2024-06-10&dates=2024-06-24

利用参数paramsSerializer,传递一个参数处理函数

ts 复制代码
import axios from 'axios'

const instance = axios.create({});

const { data } = await instance({
  url: '/records',
  method: 'GET',
  params,
  // 序列化参数
  paramsSerializer: function (params) {
    let str: string[] = [];
    for (let key in params) {
      // console.log('item', key);
      if (key === 'createdDates') {
        params[key]?.length &&
          str.push(...[`${key}=${params[key][0]}`, `${key}=${params[key][1]}`]);
      } else {
        str.push(`${key}=${params[key]}`);
      }
    }
    return str.join('&');
  },
});
相关推荐
江屿风5 天前
【Plain Language Large Model】【从浏览器到全栈:一课精通Node.js三剑客】流食般投喂
笔记·前端框架·npm·node.js·js·npx
Flynt8 天前
我把热榜那篇"禁用 axios"逐条实测了一遍:结论大体对,坑在它没讲的地方
前端·javascript·axios
无巧不成书02189 天前
Tomcat部署JSP文件完整指南:手动部署+IDEA工程化实现 附404访问错误全排查
java·ide·windows·tomcat·intellij-idea·js
骑着蜗牛撵大象32712 天前
语音变分录、规则挡幻觉:拆解开源 AI 记账系统 Smart Ledger 的全栈设计
人工智能·ai·架构·js·数据校验
ratel️12 天前
小墨析 · Office Agent 日常办公不烧心
python·langchain·word·excel·fastapi·js·ppt
落花看风雪14 天前
从零开始搭建后台系统(vue3+TypeScript+Vite)01
typescript·vue·js
逆风优雅19 天前
nestjs middleware 接口请求日志
后端·js
请为小H留灯1 个月前
Windows 本地前端项目一键运行指南:Volta+Node+pnpm + 阿里镜像完整初始化流程
前端·pnpm·node·js
大貔貅喝啤酒1 个月前
Gitea+Jenkins+Docker 搭建 Node 项目 CI/CD 自动部署完整教程
ci/cd·docker·jenkins·js·gitea
禁止摆烂_才浅1 个月前
Axios 完整封装合集(鉴权 + 重复拦截 + Loading + 缓存 + 统一错误 + 请求重试|全代码逐行注释)
前端·javascript·axios