Get / delete method to pass array parameters in Vue

When the front-end and back-end interact, sometimes you need to pass an array to the back-end through get or delete. However, the back-end cannot receive data directly because the array parameters will be translated during the transmission process. The result is as follows:

Parameters: { name : [ 1, 2, 3 ] }
Translation effect: http://aaa.com?name[]=1&name[]=2&name[]=3
Target effect: http://aaa.com?name=1&name=2&name=3

Solution:

Use the qs plugin to serialize array parameters

1. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// Output: 'a[0]=b&a[1]=c'
2. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// Output: 'a[]=b&a[]=c'
3. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// Output: 'a=b&a=c'
4. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// Output: 'a=b,c'

Install

npm install qs

use

//In the axios request interceptor import qs from 'qs'
axios.interceptors.request.use(request => {
 if (request.method === 'delete' || request.method === 'get') {
 request.paramsSerializer = function(params) {
  return qs.stringify(params, { arrayFormat: 'repeat' })
 }
 }
 return request
},(error) =>{
 return Promise.reject(error);
})

Knowledge point extension: Get, Delete, Post, Put passing parameters in Vue

For reference only for novice programmers who have just come into contact with Vue2.5 and above and do not understand how to pass parameters

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
/*In order to better interact with the front and back ends, introduce the js file axios.js*/
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    // axios request parameter passing // axios get request parameter passing // traditional format get request axios.get('http://localhost:3000/axios?id=123')
      .then(function(ret){
      console.log(ret.data)
     })
     // RESTful get request axios.get('http://localhost:3000/axios/123')
      .then(function(ret){
      console.log(ret.data)
     })
     // Get request with parameters axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret) {
      console.log(ret.data)
    })

    // // axios delete request parameter axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret) {
      console.log(ret.data)
    })

    //-----------------------------------

    // Use axios to make a post request, passing json data by default axios.post('http://localhost:3000/axios', {
        'uname': 'lisi',
        'pwd': 123
      }).then(function(ret) {
        console.log(ret.data)
      })
      // Use axios to make a post request and pass form data var params = new URLSearchParams();
       params.append('uname', 'zhangsan');
       params.append('pwd', '111');
       axios.post('http://localhost:3000/axios', params)
        .then(function (ret) {
         console.log(ret.data)
        })

    // axios put request parameter axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret) {
      console.log(ret.data)
    })



    // For axios, in get and delete requests, parameters are placed in the params attribute // In post and put requests, parameters are placed directly in the object</script>
</body>

</html>

The code that initiates the request to the backend (some companies do not allow server-side programmers to write it) The front-end programmer is only for the examination

app.get('/adata', (req, res) => {
  res.send('Hello axios!')
})
app.get('/axios', (req, res) => {
  res.send('axios get pass parameter' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
  res.send('axios get (Restful) pass parameters' + req.params.id)
})
app.delete('/axios', (req, res) => {
  res.send('axios get pass parameter' + req.query.id)
})
app.delete('/axios/:id', (req, res) => {
  res.send('axios get (Restful) pass parameters' + req.params.id)
})
app.post('/axios', (req, res) => {
  res.send('axios post pass parameters' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
  res.send('axios put pass parameters' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

This is the end of this article about the get/delete method of passing array parameters in vue. For more relevant content about passing array parameters in vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: