Axios passes array parameters, but the background cannot receive them

Regarding the front-end and back-end joint debugging, there is a problem that the parameters cannot be received. If you encounter a color pen back-end, the parameter format is not clear and there is no interface document, which is a very headache.

Axios parameters are divided into two groups: get(delete), post(put). The method of passing parameters for get and delete is basically the same, and the method for post and put is basically the same.

1. The get(delete) transfer array cannot be received by the background:

Both of these are question mark parameters, that is, the parameters are spliced behind the question mark of the url.
That's it:
insert image description here

But it's troublesome when passing an array:

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

insert image description here
In this case, the background cannot get the value. We need to change the array into the following format:

first find the request interception of axios, use qs, and add the following code:

if (config.method === 'get') {
    
    
    // 如果是get请求，且params是数组类型如arr=[1,2]，则转换成url?ids=1&ids=2&ids=3
    config.paramsSerializer = function(params) {
    
    
      // return qs.stringify(params, { arrayFormat: 'repeat' })
      return qs.stringify(params, {
    
     indices: false })
    }
  }

The console effect is as follows:
insert image description here
The post will basically not encounter the problem that the array cannot be accepted, and if it encounters it, just format the parameters directly

qs.stringify(params, {
    
     indices: false })

The format of the array in the qs library has the following forms:

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

2. Post (put) parameter passing problem

If the post request cannot receive parameters in the background, you can check from the following aspects

The post parameter is data

2. Does the background need form format to pass parameters?
Axios defaults to jsonapplication/json;charset=utf-8. If the background needs form format to pass parameters, you need to set:

The Content-Type in headers is application/x-www-form-urlencoded; charset=utf-8 or multipart/form-data

The format of post parameters:

application/x-www-form-urlencoded (form mode)
application/json (JSON mode)
multipart/form-data (file mode)

Replenish:

1. Can parameters be passed after the question mark in the url in the post request?

Answer: Yes. Splice directly after the url

export function listGroup(query){
    
    
  return request({
    
    
    url:"/census/group/list"+'?pageNum='+query.pageNum+'&pageSize='+query.pageSize,
    method:'post',
    data:query
  })
}

2. Can the get request put parameters in the body?

Answer: No. It can only be spliced into the url to pass parameters.
Reason reference: Regarding the use of body front-end Get requests
in GET requests, can parameters be uploaded in the body?

3. Other questions about delete parameters

Reference: axios delete transfer parameter method