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('&');
  },
});
相关推荐
程楠楠&M6 小时前
vue3.0(十六)axios详解以及完整封装方法
前端·javascript·vue.js·axios·anti-design-vue
@是萱呀!8 小时前
JS+CSS+HTML项目-中国国家图书馆
css·html·js
PleaSure乐事2 天前
前端三件套开发模版——产品介绍页面
前端·javascript·css·html·js·模版
艳艳子呀2 天前
Vue 2 与 ECharts:结合使用实现动态数据可视化
vue·echarts·数据可视化·js
欣慰的三叶草(● ̄(エ) ̄●)3 天前
WebStorm 2024 for Mac JavaScript前端开发工具
javascript·macos·vue·js·webstorm·前端开发工具·web开发工具
啊猪是的读来过倒3 天前
Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
前端·javascript·vue.js·axios
HaanLen4 天前
axios源码打包关于rollup.config.js文件分析
javascript·ecmascript·axios·rollup·打包工具
Eric⠀4 天前
【02问:前端常见的设计模式】
前端·javascript·vue.js·设计模式·js
门板_5 天前
解决跨域问题(vite、axios/koa)
typescript·axios·vite·koa·跨域·cors·vue项目笔记