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 小时前
Vue3——使用axios实现Ajax请求
前端·javascript·ajax·axios
珊瑚怪人19 小时前
分享一个Edge浏览器播放H265 RTSP流的问题,涉及到ZLMediaKit、WebRTC
音视频·视频·js·zlmediakit·视频流处理
双普拉斯1 天前
打造工业级全栈文件管理器:深度解析上传、回收站与三重下载流控技术
spring·vue·js
zhensherlock2 天前
Protocol Launcher 系列:Overcast 一键订阅播客
前端·javascript·typescript·node.js·自动化·github·js
李昊哲小课5 天前
Axios 完整实战教程
axios
拆房老料5 天前
5分钟上手 OnlyOffice 连接器,打通业务系统与文档编辑器
编辑器·开源软件·js
zhensherlock10 天前
Protocol Launcher 系列:Mail Assistant 轻松发送 HTML 邮件
前端·javascript·typescript·node.js·html·github·js
cuoluoche10 天前
postman接口请求response是base64-图片这类的可视化。
js
Huanzhi_Lin10 天前
关于V8/MajorGC/MinorGC——性能优化
javascript·性能优化·ts·js·v8·新生代·老生代
百撕可乐11 天前
WenDoraAi官网NextJS实战03:项目插件与Header组件
react.js·js