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('&');
  },
});
相关推荐
西洼工作室4 小时前
前端接口安全与性能优化实战
前端·vue.js·安全·axios
Derrick__11 天前
Web Js逆向——加密参数定位方法(Hook)
python·js
柯腾啊1 天前
一文简单入门 Axios
前端·axios·apifox
浪裡遊3 天前
Next.js路由系统
开发语言·前端·javascript·react.js·node.js·js
我命由我123453 天前
HTML - 换行标签的 3 种写法(<br>、<br/>、<br />)
前端·javascript·css·html·css3·html5·js
Sheldon一蓑烟雨任平生5 天前
Vue 用户管理系统(路由相关练习)
vue.js·vue3·axios·json-server·vue-router·vue 路由·vue-link
apollo_qwe5 天前
封装axios实现全局loading,在一定程度上减少重复请求的发生
axios
贪婪的君子7 天前
【每日一面】实现一个深拷贝函数
前端·js
~无忧花开~11 天前
掌握Axios:前端HTTP请求全攻略
开发语言·前端·学习·js
沐雨橙风ιε11 天前
防止表单重复提交功能简单实现
java·spring boot·ajax·axios·spring mvc