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('&');
  },
});
相关推荐
小妖6664 天前
console.log 显示内容不全怎么办
javascript·js·console.log
padane2210 天前
gmssl编译wasm
ubuntu·html·密码学·wasm·js
海市公约10 天前
Axios网络请求库核心特性与拦截器封装实践
axios·前端开发·promise·拦截器·网络封装
我命由我1234511 天前
VSCode - VSCode 自定义折叠区域
前端·javascript·ide·vscode·前端框架·编辑器·js
审判长烧鸡14 天前
【AI问答/前端】前端瞒天过海局(三)
前端·vue·html5·js
星星~笑笑15 天前
react Next.js oss上传 上传阿里云
javascript·react.js·阿里云·js
xChive18 天前
前端请求取消:用 AbortController 从 fetch 到 axios
前端·vue.js·axios·fetch·abortcontroller
xx240622 天前
计算机基础-存储单位
js
辞忧九千七22 天前
前后端分离架构实战与项目落地:AI智能学习笔记管理系统
python·html·axios·css3·fastapi·dify
rising start22 天前
InsightEdu - 轻量智能学习平台
javascript·axios·css3·html5·fastapi·orm·dify