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('&');
  },
});
相关推荐
27669582921 天前
美团 小程序 mtgsig
python·小程序·node·js·mtgsig1.2·美团小程序·大众点评小程序
学海无涯,行者无疆3 天前
前端 Axios 深度封装实战:拦截器 + 文件处理 + 业务接口统一管理
axios·前后端交互·axios使用·axios实战·axios封装·axios详解·axios用法
军军君0110 天前
Three.js基础功能学习十一:动画与音频
前端·javascript·3d·js·threejs·三维
刘一说11 天前
Vue3 模块语法革命:移除过滤器(Filters)的深度解析与迁移指南
前端·vue.js·js
曲幽11 天前
JavaScript流程控制:从混乱条件到优雅遍历,一次讲清如何让代码听话
javascript·web·js·for·while·if·if else
乐迁~11 天前
如何使用html2canvas和jsPDF库来解决PDF导出时分页内容截断问题(下--表格行截断处理)
pdf·js
心.c14 天前
文件上传 - 入门篇
前端·javascript·vue.js·node.js·js
可问春风_ren14 天前
前端文件上传详细解析
前端·ecmascript·reactjs·js
Java程序员-小白17 天前
Sa-Token过滤器引发的CORS误判问题
vue.js·elementui·axios·cors
stella·17 天前
后端二进制文件,现代前端如何下载
前端·ajax·状态模式·axios·request·buffer·download