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('&');
  },
});
相关推荐
SuperEugene9 小时前
Axios 统一封装实战:拦截器配置 + baseURL 优化 + 接口规范,避坑重复代码|API 与异步请求规范篇
前端·javascript·vue.js·前端框架·axios
我命由我123451 天前
React - 创建 React 项目、React 项目结构、React 简单案例、TodoList 案例
前端·javascript·react.js·前端框架·ecmascript·html5·js
酉鬼女又兒2 天前
零基础快速入门前端JavaScript 浏览器环境输入输出语句全解析:从弹框交互到控制台调试(可用于备赛蓝桥杯Web应用开发赛道)
前端·javascript·职场和发展·蓝桥杯·js
穷人小水滴2 天前
使用 WebRTC 实现局域网投屏: PC (GNOME ArchLinux) -> 平板 (Android)
android·linux·webrtc·浏览器·js·gnome·投屏
半个俗人2 天前
05postman关联-常用的数据提取方式
测试工具·jmeter·postman·js
liulilittle3 天前
范围随机算法实现
开发语言·c++·算法·lua·c·js
我命由我123454 天前
Element Plus 2.2.27 的单选框 Radio 组件,选中一个选项后,全部选项都变为选中状态
开发语言·前端·javascript·html·ecmascript·html5·js
我命由我123454 天前
Element Plus 问题:选择框表单校验没有触发
开发语言·前端·javascript·html·ecmascript·html5·js
我命由我123456 天前
JS 开发问题:url.includes is not a function
开发语言·前端·javascript·html·ecmascript·html5·js
亿牛云爬虫专家7 天前
Node.js Axios爬虫代理配置指南与内存泄漏排查
爬虫·node.js·axios·爬虫代理·内存泄漏·企业级场景·tcp 连接复用