vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)

更新時(shí)間：2022年04月24日 09:49:25 作者：怡暘

這篇文章主要介紹了vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

get方法\post方法如何傳遞數(shù)組參數(shù)

背景：項(xiàng)目中突然來了一個(gè)post方法傳array數(shù)組的參數(shù)，且該數(shù)組參數(shù)是循環(huán)遍歷所有元素按照get方法傳參形式進(jìn)行參數(shù)傳遞的，對于小白的我真的是一個(gè)打擊呀。但是為了完成任務(wù)不能放棄，so通過搜索找到了解答方式（在這里非常感謝我的小伙伴雷總的熱心幫助以及bubuko.com的解答）。

第一部分：vue中g(shù)et方法如何傳遞數(shù)組參數(shù)

直接放在對象中傳遞數(shù)組

export function getCrApplicationList(data) {
  var test = [‘111‘, ‘222‘]
  return request({
    url: ‘/applicant/CrApplication/List‘,
    method: ‘get‘,
    params: { test }
  })
}

傳遞的參數(shù)格式如下：

但是這樣的話后臺是取不到值的，我們需要把數(shù)組變成如下這種格式：

test：111

test：222

首先找到axios.js，加如下代碼：

if (config.method === ‘get‘) {
    // 如果是get請求，且params是數(shù)組類型如arr=[1,2]，則轉(zhuǎn)換成arr=1&arr=2
    config.paramsSerializer = function(params) {
      return qs.stringify(params, { arrayFormat: ‘repeat‘ })
    }
  }

如果get請求中參數(shù)是數(shù)組格式，則數(shù)組里每一項(xiàng)的屬性名重復(fù)使用。

效果如下：

同樣的，post方法傳get方法的傳參格式時(shí)候通用該方法。

下面列出我的接口格式及解決方法的源碼

封裝的接口部分：

/**
 * @description 以post請求方式，傳遞array[]數(shù)組
 * @param {Array[integer]} idList
 * @param {integer} orderId
 * @return {*}
 */
export function doFuncTest(idListVal, orderId) {
	return request({
		url: '/xxxx/xxx',
		method: 'post',
		baseURL: '//192.168.xxx.xxx:xxxx/xxx/xxx/xxx',
		params: {
			idList: idListVal,
			orderId: orderId
		}
	})
}

攔截器部分：

if (config.method === 'post') {
	config.paramsSerializer = function(params) {
		return qs.stringify(params, { arrayFormat: 'repeat' })
	}
}

最后的訪問地址如下：

http://192.168.xxx.xxx:xxxx/xxx/xxx/xxx/xxxx/xxx?idList=261&idList=262&orderId=59

完結(jié)！

vue get與post傳參方式

vue的封裝接口中，post與get的傳參方式是不同的

1.post:用data傳遞參數(shù)

/**
?* 添加動(dòng)物種類
?* @param {*} params?
?* @returns?
?*/
export function AddAnimalType (params) {
? return request({
? ? url: baseUrl + '/addAnimalType',
? ? method: 'post',
? ? data: params
? })
}

調(diào)用代碼：

下面的 this.formData 是在data中定義的列表里邊包含了id等信息

? ? //新增
? ? insertAnimalType () {
? ? ? AddAnimalType(this.formData).then(response => {
? ? ? ? if (response.status == 0) {
? ? ? ? ? successMessage(response.statusText)
? ? ? ? }
? ? ? ? else {
? ? ? ? ? errMessage(response.statusText)
? ? ? ? }
? ? ? }).catch(error => {
? ? ? ? errorCollback(error)
? ? ? })
? ? },

2.get:用params傳遞參數(shù)

/**
?* 根據(jù)Id獲取詳情
?* id id
?* @param {*} params?
?* @returns?
?*/
export function selectById (params) {
? return request({
? ? url: baseUrl + '/selectById',
? ? method: 'get',
? ? params
? })
}

調(diào)用接口：

? ? //獲取詳情
? ? getDetail () {
? ? ? selectById({ animalId: this.formData.id }).then(response => {
? ? ? ? if (response.status == 0) {
? ? ? ? ? this.formData = response.data.animalType
? ? ? ? }
? ? ? ? else {
? ? ? ? ? errMessage(response.statusText)
? ? ? ? }
? ? ? }).catch(error => {
? ? ? ? errorCollback(error)
? ? ? })
? ? },

3.delete:params傳遞參數(shù)

export function deleteAnimalType (params) {
? return request({
? ? url: baseUrl + '/delete',
? ? method: 'delete',
? ? params
? })
}

調(diào)用接口：

? ? todelete (id) {
? ? ? console.log('點(diǎn)擊操作中的刪除')
? ? ? this.$confirm('此操作將永久刪除該數(shù)據(jù)，是否繼續(xù)?', '提示', {
? ? ? ? confirmButtonText: '確定',
? ? ? ? cancelButtonText: '取消',
? ? ? ? type: 'warning'
? ? ? })
? ? ? ? .then(() => {
? ? ? ? ? deleteAnimalType({ animalIds: id }).then((response) => {
? ? ? ? ? ? if (response.status == 0) {
? ? ? ? ? ? ? successMessage(response.statusText)
? ? ? ? ? ? } else {
? ? ? ? ? ? ? errMessage(response.statusText)
? ? ? ? ? ? }
? ? ? ? ? }).catch((error) => {
? ? ? ? ? ? errorCollback(error)
? ? ? ? ? })
? ? ? ? })
? ? },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: