axios传数组对象_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

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容