axios传递数组参数爬坑总结

向右看齐 2023-01-17 07:41 133阅读 0赞

总结一下正确的传数组参数应该如下,瞅代码：

引用

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  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。