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('&');
  },
});
相关推荐
恶猫3 天前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
闲人编程4 天前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
走,板砖去6 天前
WeakMap 应用场景与示例
js
Yvonne爱编码6 天前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
Zz_waiting.7 天前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
小天呐9 天前
qiankun 微前端接入实战
前端·js·微前端
脑子慢且灵15 天前
【Web前端】JS+DOM来实现乌龟追兔子小游戏
java·开发语言·前端·js·dom
上单带刀不带妹17 天前
Node.js 的流(Stream)是什么?有哪些类型?
node.js·stream·js
Pu_Nine_917 天前
Axios 实例配置指南
前端·笔记·typescript·axios
丁同亚的博客17 天前
echarts大屏项目指南
echarts·可视化·js·web前端·大屏