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('&');
  },
});
相关推荐
我命由我123455 天前
软件开发 - 避免过多的 if-else 语句(使用策略模式、使用映射表、使用枚举、使用函数式编程)
java·开发语言·javascript·设计模式·java-ee·策略模式·js
第七种黄昏7 天前
大事件项目拆解:登录访问拦截实现详解
前端框架·vue·js
小徐_23339 天前
uni-app 还在手写请求?alova 帮你全搞定!
前端·uni-app·axios
小徐_233311 天前
uni-app 网络请求终极选型:uni.request、axios、uni-network、alova 谁才是你的真命请求库?
前端·uni-app·axios
胡西风_foxww14 天前
如何在nuxt项目中使用axios进行网络请求?
axios·网络请求·nuxt·异步·nuxt.config.js
PineappleCode15 天前
用 “私房钱” 类比闭包:为啥它能访问外部变量?
前端·面试·js
一个很帅的帅哥18 天前
JavaScriptAJAX异步请求:XHR、Fetch与Axios对比
javascript·axios·xmlhttprequest·fetch
qczg_wxg18 天前
王学岗Axios的data加密报错的问题
axios
用户849137175471620 天前
vue-element-plus-admin 第5期|Axios实战:HTTP 请求与数据处理
前端框架·axios·前端工程化
我是哈哈hh25 天前
【AJAX项目】黑马头条——数据管理平台
前端·javascript·ajax·前端框架·axios·proxy模式