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('&');
  },
});
相关推荐
Kier19 天前
🚀 前端实战:优雅地实现一个通用Blob文件下载方法
前端·javascript·axios
寒鸽子21 天前
js代码修改react框架的input的值-2025年6月
js
我命由我1234525 天前
VSCode - VSCode 让未被编辑的标签页不被自动关闭
前端·javascript·ide·vscode·编辑器·html·js
小钻风33661 个月前
深入浅出掌握 Axios(持续更新)
前端·javascript·axios
海上彼尚1 个月前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
冷凌爱1 个月前
Fetch与Axios:区别、联系、优缺点及使用差异
前端·node.js·js
outstanding木槿1 个月前
现实生活例子[特殊字符] 通俗易懂的解释[特殊字符] JS中的原型和原型链[特殊字符]
前端·javascript·js
香蕉可乐荷包蛋1 个月前
vue对axios的封装和使用
前端·javascript·vue.js·axios
potender1 个月前
前端基础学习html+css+js
前端·css·学习·html·js
每一步都算数1 个月前
Axios 取消请求的演进:CancelToken vs. AbortController
axios