axios的get请求传入数组参数

简介: axios的get请求传入数组参数

axios 发送 get 请求的一般方式如下:

axios.get(url,{params:{
a:1
}})
但是,如果 params 里有数组参数的话,上面的方法就会带来问题。

例如, 这里发送的请求参数 b 是数组:

axios.get(url,{params:{
a:1,
b:[1,2]
}})
这时候,后端 Django 用 request.GET.getlist('b') 获取到的参数 b 一直是 [].

原因
原因是对数组的序列化有多种方式,我们需要前后端统一序列化方式,才能够正确解码。

Django 的 request.GET.getlist('b') , 对请求参数 b 的序列化要求是这样子的

b=1&b=2
也就是说,用&连接数组中的元素,这并不是 axios 默认的序列化方法。

解决方法
需要指定 axios 的序列化方式,我们可以用 paramsSerializer 参数指定序列化函数。
更简单的方式是使用 qs 库:

import qs from "qs";

axios.get(url,{
params:{
a:1,
b:[1,2]
},
paramsSerializer: function (params) {
return qs.stringify(params, { arrayFormat: "repeat" });
},
})

相关文章
|
2月前
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
49 1
|
4月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
59 0
|
4月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
84 2
|
5月前
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
342 0
|
5月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
326 4
|
5月前
|
缓存 JavaScript 搜索推荐
|
5月前
|
资源调度 JavaScript
|
5月前
|
JavaScript API 开发工具
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
54 0
|
6月前
|
JavaScript
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用