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('&');
  },
});
相关推荐
mqcode12 天前
你项目里的 axios,封对了吗?从裸用到生产级的四步进化
vue.js·axios
保持当下17 天前
分享一些程序员很棘手但是却又简单的工具
程序员·免费·js·工具
Xzh042324 天前
Web 前端开发 — 期末复习指南(Html、Css、Js)
css·html5·web·js·期末
蜂蜜黄油呀土豆25 天前
Agent 循环:观察、思考、行动(ReAct 入门)
python·ai·大模型·react·js
小妖6661 个月前
console.log 显示内容不全怎么办
javascript·js·console.log
padane221 个月前
gmssl编译wasm
ubuntu·html·密码学·wasm·js
海市公约1 个月前
Axios网络请求库核心特性与拦截器封装实践
axios·前端开发·promise·拦截器·网络封装
我命由我123451 个月前
VSCode - VSCode 自定义折叠区域
前端·javascript·ide·vscode·前端框架·编辑器·js
审判长烧鸡1 个月前
【AI问答/前端】前端瞒天过海局(三)
前端·vue·html5·js
星星~笑笑1 个月前
react Next.js oss上传 上传阿里云
javascript·react.js·阿里云·js