axios传递数组参数爬坑总结

最近一个练手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
    },
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }})

post / put 请求方式解决方式如下

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

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

其余类似。这样一来，数组参数就会转换为如下的形式

url?ids=1&ids=2&id=3

后台接口接收

(1)数组类型(int[])接收结果

[1,2,3]

(1)字符串形式(String)接收结果

1,2,3

大功告成！

当然，这只是一种形式，大概有4种形式：

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

最后，对axios进行了一个封装,方便自己使用：

import axios from 'axios'
import qs from 'qs'

let baseurl = 'http://localhost:8081/api'
function getRequest (apiPath, params, successCallback, errorCallback) {
  let url = baseurl + apiPath
 let req = axios.get(url, {
    params: params,
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }})
  thenResponse(req, successCallback, errorCallback)
}
function postRequest (apiPath, params, successCallback, errorCallback) {
  let url = baseurl + apiPath
  let req = axios.post(url, qs.stringify(params, { indices: false }))
  thenResponse(req, successCallback, errorCallback)
}

function putRequest (apiPath, params, successCallback, errorCallback) {
  let url = baseurl + apiPath
  // var params = new URLSearchParams()
  // params.append('status', 0)
  let req = axios.put(url, qs.stringify(params, { indices: false }))
  thenResponse(req, successCallback, errorCallback)
}

function deleteRequest (apiPath, params, successCallback, errorCallback) {
  let url = baseurl + apiPath
  let req = axios.delete(url, {
    params: params,
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }})
  thenResponse(req, successCallback, errorCallback)
}

/**
 * 请求结果处理
 * @param axiosRequest
 * @param successCallback
 * @param errorCallback
 */
function thenResponse (axiosRequest, successCallback, errorCallback) {
  axiosRequest.then((res) => {
    if (res.status === 200) {
      res = res.data
      if (res.code === 0) {
        if (successCallback) successCallback(res)
      } else {
        if (errorCallback) errorCallback(res.code, res.msg)
      }
    }
  }).catch((error) => {
    if (errorCallback) errorCallback(-1, error.message)
  })
}
export { getRequest, postRequest, putRequest, deleteRequest }

使用:

//导入封装axios的js文件
import {getRequest, deleteRequest} from 'utils/api'
//发送delete请求，带数组参数 与 普通参数
deleteRequest('/admin/user/del', {
        token: ‘SDFSDIFJSIODFKMSDOFM,SDOPFK’,
        ids: [1,2,3,4,5,6]
      }, function (res) {
        _this.$alert('删除成功')
      }, function (errcode, errmsg) {
        _this.$alert('code ' + errcode + ' ,meaasge ' + errmsg)
      })
//发送GET请求
getRequest('/admin/users', {
        status: 0,
        pageNum: this.currentPage,
        pageSize: count,
        token: '111'
      }, function (res) {
        _this.totalPage = res.data.total
      }, function (errcode, errmsg) {
        _this.$alert('code ' + errcode + ' ,meaasge ' + errmsg)
      })

daima