axios传递数组参数爬坑总结

最新推荐文章于 2023-08-24 17:11:07 发布

原创

最新推荐文章于 2023-08-24 17:11:07 发布 · 2.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue #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