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('&');
  },
});
相关推荐
桃子不吃李子20 小时前
axios的二次封装
前端·学习·axios
惜.己1 天前
从零使用vue脚手架开发一个简易的计算器
vue·js·1024程序员节
huangyiyi666666 天前
轮询那些事儿
javascript·前端框架·vue·js
Xzh04238 天前
前后端学习的交界
java·ajax·maven·axios·测试
Ya-Jun9 天前
快应用TypeError: The ‘compilation‘ argument must be an instance of Compilation错误
node.js·ux·js
歪歪10010 天前
在哪些场景下适合使用 v-model 机制?
服务器·前端·javascript·servlet·前端框架·js
闫辉10 天前
HackerNews 播客生成器
node.js·js
~无忧花开~13 天前
JavaScript学习笔记(二十八):JavaScript性能优化全攻略
开发语言·前端·javascript·笔记·学习·性能优化·js
爱偷懒的。。14 天前
基于 WebSocket 协议的实时弹幕通信机制分析-抖音
网络·python·websocket·网络协议·学习·js
棋子一名16 天前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js