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('&');
  },
});
相关推荐
我命由我1234511 小时前
前端开发概念 - 无障碍树
javascript·css·笔记·学习·html·html5·js
90后的晨仔15 小时前
SwiftUI 数据持久化完全指南:从偏好设置到企业级存储
ios·axios
苦夏木禾1 天前
URL 类 详解
node.js·js
LIO2 天前
Axios Token 无感刷新机制:原理、实现与最佳实践
前端·axios
芳草萋萋鹦鹉洲哦2 天前
【tauri】为什么接口通信选择invoke而不是Axios
rust·axios·tauri·invoke
T畅N3 天前
审批流设计器(前端)
前端·elementui·vue·html·流程图·js
树欲静·而风不止5 天前
拿 DeepSeek 的免费对话搓了个 Everything 的静态 WebUI
ai·js
REDcker6 天前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js
爱上好庆祝6 天前
学习js的第五天
前端·css·学习·html·css3·js
捉鸭子7 天前
某音a_bogus vmp逆向
爬虫·python·web安全·node.js·js