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('&');
  },
});
相关推荐
winfredzhang1 天前
[实战] Node.js + DeepSeek 打造智能档案归档系统:从混乱到有序的自动化之旅
css·node.js·js·deepseek api
梦凡尘2 天前
前端web端解析 Word、Pdf 文档文本内容
pdf·js
梦凡尘3 天前
Marked.js 的使用及相关问题解决
前端·js
想看一次满天星6 天前
某里231——AST解混淆流程
爬虫·python·ast·js·解混淆
Han.miracle6 天前
JavaScript 基础核心知识点闯关练习
css·js
冥界摄政王6 天前
CesiumJS学习第四章 替换指定3D建筑模型
3d·vue·html·webgl·js·cesium
曲幽8 天前
手把手搞定FastAPI静态文件:安全、上传与访问
css·python·fastapi·web·js·favicon·staticfiles
冥界摄政王8 天前
Cesium学习第二章 camera 相机
node.js·html·vue3·js·cesium
孜孜不倦不忘初心10 天前
Axios 常用配置及使用
前端·axios
浩泽学编程10 天前
内网开发?系统环境变量无权限配置?快速解决使用其他版本node.js
前端·vue.js·vscode·node.js·js