美文网首页
vue 之:axios的get方法如何传递数组参数

vue 之:axios的get方法如何传递数组参数

作者: 嗯哼曼 | 来源:发表于2020-03-06 21:29 被阅读0次

    vue中使用get方法如果直接传数组给后端会报错。
    举例:

    //参数
    data() {
        return {
          listItem:["123","321"]
        };
      },
    

    这种情况下传给后端会显示为 http://xxx.com?list[]=123&list[]=321
    如何解决?
    一般我们会在axios.js 封装文件中进行POST传参序列化设置,但如果是GET方法传数组的话也是需要进行传参设置的,代码如下:

    //GET传参序列化
    axios.interceptors.request.use((config) => {
        if (config.method === 'get') {
            // 如果是get请求,且params是数组类型如arr=[1,2],则转换成arr=1&arr=2,不转换会显示为arr[]=1&arr[]=2
            config.paramsSerializer = function(params) {
              return qs.stringify(params, { arrayFormat: 'repeat' })
            }
        }
        return config;
    }, (error) => {
        return Promise.reject(error);
    });
    

    这堆代码加载axios.js中,应该就没问题了,就会改为 http://xxx.com?list=123&list=321

    相关文章

      网友评论

          本文标题:vue 之:axios的get方法如何传递数组参数

          本文链接:https://www.haomeiwen.com/subject/otsirhtx.html