axios的get请求时数组参数没有下标

开发新项目过程中 发现get请求时 数组参数没有下标

这样肯定是不行的 后端接口需要数组0: 7 数组1:4这样的数据

原因是因为在请求拦截器没有处理需要的参数

解决方法 在请求拦截器 处理一下参数

javascript 复制代码
import axios, { AxiosError, AxiosInstance, AxiosRequestHeaders } from "axios";
//request拦截器
service.interceptors.request.use(
  (config) => {
  ///-----------------------这里开始
  const params = config.params || {};
    const data = config.data || false;
    if (
      config.method?.toUpperCase() === "POST" &&
      (config.headers as AxiosRequestHeaders)["Content-Type"] ===
        "application/x-www-form-urlencoded"
    ) {
      config.data = qs.stringify(data);
    }
    // get参数编码
    if (config.method?.toUpperCase() === "GET" && params) {
      let url = config.url + "?";
      for (const propName of Object.keys(params)) {
        const value = params[propName];
        if (
          value !== void 0 &&
          value !== null &&
          typeof value !== "undefined"
        ) {
          if (typeof value === "object") {
            for (const val of Object.keys(value)) {
              const params = propName + "[" + val + "]";
              const subPart = encodeURIComponent(params) + "=";
              url += subPart + encodeURIComponent(value[val]) + "&";
            }
          } else {
            url += `${propName}=${encodeURIComponent(value)}&`;
          }
        }
      }
      // 给 get 请求加上时间戳参数,避免从缓存中拿数据
      // const now = new Date().getTime()
      // params = params.substring(0, url.length - 1) + `?_t=${now}`
      url = url.slice(0, -1);
      config.params = {};
      config.url = url;
    }
      ///-----------------------这里结束
    return config;
  },
  (error: AxiosError) => {
    console.log(error);
    Promise.reject(error);
  }
);

加上以后就好了

相关推荐
ly768917 小时前
Vue 3 从入门到工程实践:基础语法、组件化、路由、状态管理与项目部署
前端·javascript·vue.js
梅孔立18 小时前
Pi-Agent 终极极简配置文档(Java+Vue+Python爬虫 4-5千文件项目)
java·vue.js·python
码视野21 小时前
基于 Vue3 + Element Plus 的【智慧社区洗车养车与上门流动洗车预约调度系统】设计与实现(含PRD/三端源码/大屏)
前端·javascript·vue.js·人工智能·vue3
码视野21 小时前
基于 Vue3 + Element Plus 的【无人值守共享自习室与空间智能预约系统】设计与实现(含PRD/三端源码/大屏)
前端·javascript·vue.js·人工智能·vue3
Su米苏21 小时前
针对使用@vue-office 出现的包异常找不到问题
前端·javascript·vue.js
用户83134859306981 天前
Cesium实现动态流动火烧云晚霞效果(可用slider调整火烧云浓度)
vue.js·webgl·cesium
码视野1 天前
基于 Vue3 + Element Plus 的【青少年心理健康智能测评与 AI 情绪树洞陪护干预系统】设计与实现(含PRD/三端源码/大屏)
前端·vue.js·人工智能·vue3
daols881 天前
vue 表格vxe-table 实现紧凑型表格的方式
前端·javascript·vue.js
Java搬码工1 天前
VUE3使用教程
前端·javascript·vue.js
小白勇闯网安圈1 天前
Vue 3 核心进阶:组合式 API、响应式系统与 <script setup>
前端·javascript·vue.js