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('&');
  },
});
相关推荐
EterNity_TiMe_2 天前
上手 Rokid JSAR:新手也能快速入门的 AR 开发之旅
ar·js·rokid
TeleostNaCl3 天前
实战 | 使用 Chrome 开发者工具修改网页源码跳过前端校验
前端·chrome·经验分享·后端·js
sniper_fandc3 天前
Axios快速上手
vue.js·axios
吹晚风吧8 天前
什么是跨域?跨域怎么解决?跨域解决的是什么问题?
java·vue.js·js·cors
~无忧花开~10 天前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
~无忧花开~10 天前
JavaScript学习笔记(十七):ES6生成器函数详解
开发语言·前端·javascript·笔记·学习·es6·js
keep_di11 天前
05-vue3+ts中axios的封装
前端·vue.js·ajax·typescript·前端框架·axios
一粒马豆15 天前
excel表格通过前端fetch上传至后端flask处理流程示例
前端·python·flask·excel·h5·js·fetch
BXCQ_xuan17 天前
软件工程实践八:Web 前端项目实战(SSE、Axios 与代理)
前端·axios·api·sse
恶猫1 个月前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度