axios传递数组参数

太过爱你忘了你带给我的痛 2021-09-13 16:40 488阅读 0赞

## axios传递数组参数 ##

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

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

如果你像正常的方式一样，将一个数组作为一个请求参数传递，那么要么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)
          })

转载：  
作者：黄二狗V  
链接：https://www.jianshu.com/p/68d81da4e1ad