axios传递数组参数爬坑总结

在使用axios进行网络请求时,遇到将数组作为参数传递给后台接口的问题,发现直接传递会导致异常或参数接收失败。通过搜索资料并尝试,总结出正确的处理方式,包括对get、delete、post和put请求的处理方法,使数组参数能被后台正确接收。同时,对axios进行了封装,以方便日后使用。

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

最近一个练手vue项目,选择axios作为网络请求库。
后台一接口使用了数组作为参数。本以为没什么,实则遇到了一个大坑。

axios.post(url,{
  ids: [1,2,3],
  type: 1
}).then((res) => {
})

好了,高高兴兴发起请求。接下来,你可能是这样子的:
一脸懵逼

如果你像正常的方式一样,将一个数组作为一个请求参数传递,那么要么axios直接抛出连接异常,要么后端接口接收不到匹配的参数。
于是,打开常年友好合作的百度,输入了axios传递数组参数,照着看似乎感觉靠谱的博文修改一番,肯定还是不行,哈哈哈,反正不少坑逼博文。虽然。只是个小问题,作为彩笔的我,还是搞了很久,一遍捣鼓前端,一遍捣鼓后端接口,其实后端接口没什么猫病,都是前端的锅。

总结一下正确的传数组参数应该如下,瞅代码:

引用
import axios from 'axios'
import qs from 'qs'
get / delete请求方式解决方式如下
axios.get(url, {
    params: {
     ids: [1,2,3],
     type: 1
    },
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }})

axios.delete(url, {
     params: {
     ids: [1,2,3],
     type: 1
    },
    paramsSeri
当使用axios进行post请求时,如果要传递一个数组作为参数,你可以使用qs库将数组参数序列化为字符串。首先,你需要导入axios和qs库,然后使用qs.stringify()方法将数组参数进行序列化。例如,你可以这样写代码: import axios from 'axios' import qs from 'qs' axios.post(url, qs.stringify({ ids: [1, 2, 3] })) .then((res) => { // 处理响应 }) 在这个例子中,ids参数是一个数组,通过qs.stringify()方法将其序列化为字符串。然后,使用axios.post()方法发送post请求,并将序列化后的参数作为请求体发送到服务器。最后,你可以在.then()方法中处理响应。这样就可以成功将数组作为参数传递给后台接口了。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [axios传递数组参数](https://blog.youkuaiyun.com/sunrj_niu/article/details/106804840)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [axios向后台传递数组作为参数的方法](https://download.youkuaiyun.com/download/weixin_38628211/13658162)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值