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('&');
  },
});
相关推荐
清粥油条可乐炸鸡3 天前
tanstack query的基本使用
前端·axios
代码小学僧4 天前
为什么我推荐前端项目都应该使用 TanStack Query 管理接口请求
前端·react.js·axios
心.c9 天前
虚拟滚动列表
前端·javascript·vue.js·js
REDcker13 天前
Media Source Extensions (MSE) 详解
前端·网络·chrome·浏览器·web·js
梅川_酷子21 天前
我修了一个注释代码,结果引出一连串线上 BUG…
前端·axios
奔跑路上的Me22 天前
axios 请求头封装过程遵循「最小可用 → 逐步增强」
axios
陈振wx:zchen200822 天前
JavaScript
javascript·js
John_ToDebug23 天前
引擎深处的漫游者:构建浏览器JavaScript引擎的哲学与技艺
javascript·chrome·js
esmap25 天前
OpenClaw与ESMAP AOA定位系统融合技术分析
前端·人工智能·计算机视觉·3d·ai·js
薛定谔的猫喵喵25 天前
猪笼草生长环境模拟器:交互式生物教育工具实现指南
python·html·echarts·js