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('&');
  },
});
相关推荐
cooldream20093 天前
使用Axios函数库进行网络请求的使用指南
前端·vue·axios
京东菜鸟全球通快递小哥4 天前
Axios取消重复请求,但能让最新请求作为最终返回,且能共享状态 ,不知小伙您有没有尝到真香~
前端·javascript·axios
cooldream20095 天前
使用 Axios 拦截器优化 HTTP 请求与响应的实践
vue·axios·拦截器
曾经的三心草6 天前
JavaWeb之AJAX
java·ajax·json·axios·web
JerryXZR7 天前
Javascript 高级事件编程 - Axios & fetch
javascript·ecmascript·axios·fetch
A_cot10 天前
Vue.js:构建现代 Web 应用的强大框架
前端·javascript·vue.js·flutter·html·web·js
前端李易安16 天前
手写一个axios方法
前端·vue.js·axios
Liquor141918 天前
JavaScript知识点梳理及案例实践
开发语言·前端·javascript·python·css3·html5·js
前端李易安18 天前
如何封装一个axios,封装axios有哪些好处
前端·vue.js·axios
fury_12318 天前
base64文本div中增加一个img标签,img标签实时渲染后端返回的base64数据成对应图片
java·服务器·前端·js