最近做一個(gè)練手的vue項(xiàng)目，選擇axios作為網(wǎng)絡(luò)請求庫我纪。后臺一個(gè)接口使用了數(shù)組作為參數(shù)慎宾，本以為沒什么丐吓，實(shí)則遇到了一個(gè)大難題。
一開始趟据，我是這么進(jìn)行參數(shù)傳遞的：
axios.post(url,{
ids: [1,2,3],
type: 1
}).then((res) => {
})
好了券犁，高高興興發(fā)起請求。接下來汹碱，你可能是這樣子的：
一臉懵逼
如果你像正常的方式一樣族操，將一個(gè)數(shù)組作為一個(gè)請求參數(shù)傳遞，要么axios直接拋出連接異常比被，要么后端接口接收不到匹配的參數(shù)色难。經(jīng)過多番查詢和實(shí)驗(yàn)，終于可以成功的傳遞各種數(shù)組類型的參數(shù)了等缀，總結(jié)一下正確的傳數(shù)組參數(shù)應(yīng)該如下,需要引入一個(gè)序列化的庫qs枷莉，瞅代碼：
引用
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 }))
其余類似。這樣一來尺迂，使用網(wǎng)絡(luò)請求傳遞參數(shù)的時(shí)候笤妙，數(shù)組參數(shù)就會轉(zhuǎn)換為如下的形式
url?ids=1&ids=2&ids=3
后臺接口接收
(1)后臺以數(shù)組類型(int[])接收的結(jié)果
[1,2,3]
(1)后臺以字符串形式(String)接收的結(jié)果
1,2,3
大功告成！
當(dāng)然噪裕，這只是一種形式蹲盘，大概還有4種形式，根據(jù)您的業(yè)務(wù)需求選擇一種即可：
//形式1： ids=1&ids=2&id=3
qs.stringify({ids: [1, 2, 3]}, { indices: false })
//形式2： ids[0]=1&aids1]=2&ids[2]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘})
//形式3：ids[]=1&ids[]=2&ids[]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘})
//形式4： ids=1&ids=2&id=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat‘})
最后膳音，對axios進(jìn)行了一個(gè)簡單的封裝,方便自己使用召衔，這個(gè)封裝只是一個(gè)參考，比較粗糙祭陷，哈哈苍凛，具體的可根據(jù)您的業(yè)務(wù)需求，做更加精細(xì)的封裝：
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)
}
/**
* 請求結(jié)果處理
* @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 }
使用方式:
//導(dǎo)入封裝axios的js文件
import {getRequest, deleteRequest} from 'utils/api'
//發(fā)送delete請求兵志，帶數(shù)組參數(shù) 與 普通參數(shù)
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)
})
//發(fā)送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
