Brief discussion on the problem that the transfer data is an array format in vue

qs' stringify receives 2 parameters. The first parameter is the object that needs to be serialized, and the second parameter is the conversion format. Generally, the default format gives a clear index, such as: arr[0]=1&arr[1]=2

//indices is the plural format of index, so indices means index//bracket means brackets, so arrayFormat:'brackets' means that the array subscript is empty[]
({ arr: [1,2,3] }, { indices: false }) //arr=1&arr=2&arr=3
({ arr: [1,2,3] }, { arrayFormat: 'indices' }) //arr[0]=1&arr[1]=2&arr[2]=3
({ arr: [1,2,3] }, { arrayFormat: 'brackets' }) //arr[]=1&arr[]=2&arr[]=3
({ arr: [1,2,3] }, { arrayFormat: 'repeat' }) //arr=1&arr=2&arr=3

Use parse() of qs

If the interface needs to obtain the request data of the get request interface, you can use parse() to convert the parameter data spliced ​​at the address into an object

let url = "111.111.3.203:8080/getList?id=1&name=huahua&arr=a&arr=b"
let splitObj = ('?')[1]
(splitObj )  //{ id: '1', name: 'huahua', arr: ['a','b'] }

The difference between

let obj = { a: 1, b: 2 }
(obj)  //a=1&b=2
(obj) // "{'a': 1, 'b': 2}"

qs solves the problem of array parameters

Install axios, qs

npm install qs

npm install axios -S

Introduce qs in

import Vue from 'vue'
import qs from 'qs'
import axios from 'axios'
.$qs = qs;  //qs is mounted globally on vue instance.$http = axios; //axiosGlobally mounted onvueOn the example

Use in components

The request parameter of get request is to place the data in the config params, which is actually spliced ​​on the url through "&"

If the request parameter is array arr=[1,2,3] and the get request does not do any processing on the array, the interface passed to the backend is

"url address?arr[]=1&arr[]=2&arr[]=3", the interface will report an error because the symbol "[]" cannot be recognized.

The array needs to be modified, and the array needs to be serialized through the stringify() method of qs. The interface passed to the backend is "url address?arr=1&arr=2&arr=3", and the interface will not report an error.

 = [1,2,3]
//Writing method 1, directly use stringify() of qsthis.$('url address', {
 params: {
 arr: this.$()  //Arrays are spliced ​​at the url address url address?arr=1&arr=2&arr=3 }
}).then(() => {
}) 

//Writing method 2, use the paramsSerializer serialization function provided by axios.this.$('url address', {
 params: {
 arr:   //Arrays are spliced ​​at the url address url address?arr=1&arr=2&arr=3 },
 paramsSerializer: (params) => {
 return this.$(params) 
 }
}).then(() => {
}) 

The above article briefly talks about the problem that the data transmitted in vue is in an array format. This is all the content I share with you. I hope you can give you a reference and I hope you can support me more.