前端向后端传递数据用qs库解决问题系列

@活着笑

已于 2023-04-11 23:05:43 修改

阅读量750

点赞数

CC 4.0 BY-SA版权

分类专栏： # 问题及解决问题方法记录文章标签： java 数据结构算法 ajax

于 2023-03-05 09:23:27 首次发布

本文链接：https://blog.youkuaiyun.com/woschengxuyuan/article/details/129225379

问题及解决问题方法记录专栏收录该内容

9 篇文章

订阅专栏

在使用axios进行HTTP请求时，遇到问题：1)传递数组时自动添加[]，通过Qs库的配置可以避免；2)需要将payload转换为fromData格式以满足服务端要求。解决方案包括使用Qs.stringify并设置indices选项为false，以及在post请求中序列化payload。

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

引入QS库

npm install qs

import qs from 'qs'

问题1：axios 向后端传递数组会默认给数组的每个参数添加一个“[]“，如何解决这个问题?

post请求去掉"[]"

axios.post("",Qs.stringify(this.userIds,{indices:false})

get请求去掉"[]"

axios.delete("user/deleteUserById", {
                    params: {
                        userIds: this.userIds
                    },
                    paramsSerializer: {
                        serialize: params => {
                            return Qs.stringify(params, {indices:false})
                        }
                    }
                })

问题2:服务端只能接收from Date请求，客户端post请求传递数据为pay load请求

QS将pay load请求序列化为from Date请求

  this.$axios
                .post('login', this.$qs.stringify(this.user))
                .then(response=>{
                    let result=response.data;   
                })
                .catch(error=>{
                    alert(error)
                })