序列化paramsSerializer的使用

笑毅

已于 2023-04-19 09:49:15 修改

阅读量1.8k

点赞数 2

文章标签： vue.js javascript 前端

于 2023-04-19 09:45:12 首次发布

本文链接：https://blog.csdn.net/qq_36877078/article/details/130226595

版权

在Vue项目中，使用axios封装get方法时可能遇到数组参数和时间参数的问题。数组参数默认会带有中括号，如`ids:[1,2,3]`，通过引入qs库并设置`paramsSerializer`可以将arrayFormat设为repeat解决。时间参数如2023-01-0112:00:00，空格会被转换为+,导致400错误，使用paramsSerializer编码成%20能保证接口调用成功。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目中，封装axios的get方法时，需要用到paramsSerializer

1、当传参为数组时，默认的传参数据，控制台的payload中的数组key名称后边会多一个[]，例如传参ids: [1,2,3]，解析出来的是

如果需要去掉中括号，就需要使用到paramsSerializer
如下

import axios from 'axios';
import qs from 'qs'// 引入qs
const axios_ = axios.create({
  baseURL: config.baseURL,
  timeout: 60000, // 请求时间超过60秒视为超时
  withCredentials: true,
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  },
  paramsSerializer(params) {
    return Qs.stringify(params, { arrayFormat: 'repeat', allowDots: true });
  }
});

或者针对某一个get请求来设置

axios.get(url,{
	 params, 
	 paramsSerializer(params) {
	    return Qs.stringify(params, { arrayFormat: 'repeat', allowDots: true });
	  }
}).then(res => {}).catch(err => {})