vue axios get方法请求如何发送数组参数

简述

axios 作为vue函数库里面优秀的网络请求库，项目中使用频率非常高，但get在传送数组需要设置一下，因为所有的参数都是以url的方式发送。看看get例子吧。

错误的方式

先安装并引入axios

npm install qs --save

import axios from 'axios'

原始未处理的案例如下：

axios.get('you url',{
    idArr: [1,2,3],
    type: 1
}).then((res) => {})

请求地址会是如下形式：you url?idArr[]=1&idArr[]=2&idArr[]=3&type=1

正确的方式

安装qs库

npm install qs --save

引入qs库

import qs from 'qs'

get 配合paramsSerializer使用方法如下：

axios.get('you url',{
    idArr: [1,2,3],
    type: 1,
    paramsSerializer: params => {
        return qs.stringify(params, { indices: false })
    }
}).then((res) => {})

请求地址最终转换成如下形式：you url?idArr=1&idArr=2&idArr=3&type=1

post/put配合paramsSerializer()和qs.stringify()使用方法如下：

axios.post(url, qs.stringify(
    params: {
        idArr: [1,2,3],
        type: 1
    }, { indices: false }))

axios.put(url, qs.stringify(params: {
    idArr: [1,2,3],
    type: 1
}, { indices: false }))

请求地址最终转换成如下形式：you url?idArr=1&idArr=2&idArr=3&type=1

qs.stringify最多可以配合转换成4种形式

qs.stringify({idArr: [1, 2, 3]}, { indices: false })
 //形式： idArr=1&idArr=2&idArr=3
qs.stringify({idArr: [1, 2, 3]}, {arrayFormat: 'indices'})
 //形式： idArr[0]=1&idArr]=2&idArr[2]=3
qs.stringify({idArr: [1, 2, 3]}, {arrayFormat: 'brackets'})
 //形式：idArr[]=1&idArr[]=2&idArr[]=3
qs.stringify({idArr: [1, 2, 3]}, {arrayFormat: 'repeat'}) 
//形式： idArr=1&idArr=2&idArr=3

题外：关于文中的qs库

qs库是一个非常强大的函数库，不只是这么点技能，有兴趣可以直接到网上了解下。
npm qs: https://www.npmjs.com/package/qs