This is the third day of my participation in the August More text Challenge. For details, see: August More Text Challenge

The company project axios made a request to pass an array to the background, but the background said it could not accept the value of the test parameter…

Note: The parameter of post request is data, and the parameter of GET request is params

The background of the GET request could not accept the parameter


request({
    test: [1.2.3]
}).then((res) = >{})// In actual projects, it is recommended that AXIOS be encapsulated as request and then write API calls uniformly
export function commonQuery(params) {
    return request({
        url: "/common/query".method: "get",
        params // Equivalent to params:params
    });
}

Copy the code

We need to introduce a serialized library, qs, and set it in the request interceptor:


import qs from 'qs'

//get,delete Sets the paramsSerializer attribute. Post,put {indices: false}

if(config.method === 'get') {// If it is a get request and params is an array type such as arr=[1,2], then convert it to arr=1&arr=2
    config.paramsSerializer = function(params) {
        return qs.stringify(params, {arrayFormat: 'repeat'}}})Copy the code

// Form 1: ids=1& IDS =2&id=3
qs.stringify({ids: [1.2.3] {},indices: false })

// Form 2: ids[0]=1&aids1 =2&ids[2]=3
qs.stringify({ids: [1.2.3] {},arrayFormat: 'indices'})

// Form 3: ids[]=1&ids[]=2&ids[]=3
qs.stringify({ids: [1.2.3] {},arrayFormat: 'brackets'})

// Form 4: ids=1&ids=2&id=3
qs.stringify({ids: [1.2.3] {},arrayFormat: 'repeat'})
Copy the code

The background of the POST request could not receive the parameter

If it is a POST request that the background does not receive parameters, then you can check from the following aspects

1. The post parameter isdata


// For example, the following parameter is placed in opTS, and opTS is assigned to data
export function commonQuery(opts = {}) {
    return request({
        url: "/common/query".method: "post".data: opts
    });
}

// Or as shown below, which involves ES6 syntax, if the parameter and value are named the same, it can be omitted as shown below
export function commonQuery(data) {
    return request({
        url: "/common/query".method: "post",
        data // Equivalent to data:data
    });
}
Copy the code

2. Does the background need to pass the parameter in form format

Axios defaults to jsonApplication /json; Charset = utf-8 refs

If the background needs to pass the form format parameter, you need to set:

  • In the headersContent-Typeforapplication/x-www-form-urlencoded; charset=utf-8ormultipart/form-data
  • transformRequestTransform data format

Format of the post parameter

  • Application/x-wwW-form-urlencoded (application/ x-wwW-form-Urlencoded)
  • Application /json (using JSON)
  • Multipart /form-data (file mode)

export function commonQuery(data) {
  return axios({
    url: "/common/query".method: "post".transformRequest: [
      function (data) {
        // Do whatever you want to transform the data
        let ret = ' '
        for (const it in data) {
          ret +=
            encodeURIComponent(it) +
            '=' +
            encodeURIComponent(data[it]) +
            '&'
        }
        return ret
      }
    ],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
    },
    data
  });
}

//formData passes the file
const formData = new FormData()
formData.append('id'.'11111')
formData.append('name'.'22222')
formData.append('file'<input type='file'> value) axios ({url: '/users/upload'.method: 'post'.headers: { 'Content-Type': 'multipart/form-data' },
  data: formData
})
Copy the code