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('&');
  },
});
相关推荐
大貔貅喝啤酒14 小时前
Gitea+Jenkins+Docker 搭建 Node 项目 CI/CD 自动部署完整教程
ci/cd·docker·jenkins·js·gitea
禁止摆烂_才浅4 天前
Axios 完整封装合集(鉴权 + 重复拦截 + Loading + 缓存 + 统一错误 + 请求重试|全代码逐行注释)
前端·javascript·axios
我命由我1234510 天前
CSS - CSS 媒体查询 orientation
前端·javascript·css·html·css3·html5·js
COOLMO研究AI14 天前
Next.js App Router 中 sitemap、robots 与 canonical 的配置与排查
前端·web·js·网站优化
艾伦野鸽ggg20 天前
前端异步请求的状态竞争(请求竞态)问题
前端·javascript·axios
海天鹰20 天前
在线GPX编辑器gpx.studio
js
尾善爱看海21 天前
前端面试算法手撕全解(高频真题+标准答案)
算法·js
sunphp开发者1 个月前
明灯智慧地图导览系统制作教程
vue·php·uniapp·js·贴图
我命由我123451 个月前
JS Mock(Mock 拦截请求的前提、Mock 使用、关闭 Mock)
开发语言·前端·javascript·前端框架·html·html5·js
小小龙学IT1 个月前
第一节 QML 背景介绍
c++·qt·js