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 天前
ios的safari下载文件 文件名乱码
前端·axios·safari·下载
好开心334 天前
04、Vue与Ajax
前端·ajax·前端框架·vue·js
yzhSWJ4 天前
Java 后端给前端返回的long精度缺失,导致数据不一致
java·js·long
一雨方知深秋5 天前
智慧商城:搜索页面基于商品名称进行搜索,分类页面点击商品进行搜索。(跳转到商品列表页面,地址栏携带的参数作为请求的参数进行请求,然后动态渲染)
前端·javascript·vue.js·axios·get·query·params
Milk夜雨7 天前
React 前端框架入门教学
前端框架·js
witton10 天前
使用IP自签名SSL证书
websocket·https·ssl·ip·js·ssl证书·自签名
一雨方知深秋10 天前
购物车案例--分模块存储数据,发送请求数据渲染,底部总计数量和价格
前端·javascript·vue.js·axios·vuex·actions·mutations
阿智@1115 天前
前端实现复制功能,Uncaught TypeError: Cannot read property ‘writeText‘ of undefined
前端框架·js
啊·贤16 天前
初级报错:循环引用
前端·javascript·vue3·axios
励碼17 天前
从一个Bug谈前端响应拦截器的应用
前端·vue·bug·axios