Method of get and delete passing array parameters in vue

2021-11-01 23:16:55
OfStack

When interacting between the front and back ends, it is sometimes necessary to pass an array to the background through get or delete, but the background cannot receive data directly, because the array parameters will be translated in the process of passing, and the results are as follows:

Parameter: {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:

Serialize array parameters using qs plug-in


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'

Installation


npm install qs

Use


// In  axios  Inside the 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);
})

Extension of knowledge points: Get, Delete, Post and Put transfer parameters in Vue

Newcomer programmers who have just come into contact with Vue version 2.5 or above do not know how to pass parameters for reference only


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

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

<body>
/* For better interaction between front and back ends,   Introduce axios.js  This js Documents */
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    // axios Request parameter passing 

    // axios get Request for referral 
    //  Traditional format  get  Request 
     axios.get('http://localhost:3000/axios?id=123')
      .then(function(ret){
      console.log(ret.data)
     })
     // restful  Format  get  Request 
     axios.get('http://localhost:3000/axios/123')
      .then(function(ret){
      console.log(ret.data)
     })
     //  Parameterized  get  Request 
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret) {
      console.log(ret.data)
    })

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

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

    //  Use  axios  Go on  post  Request , Default delivery  json  Data 
    axios.post('http://localhost:3000/axios', {
        'uname': 'lisi',
        'pwd': 123
      }).then(function(ret) {
        console.log(ret.data)
      })
      //  Use  axios  Go on  post  Request , Transfer  form  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 for referral 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret) {
      console.log(ret.data)
    })



    //  For  axios  For example, in  get  And  delete  Request, the parameters are to be placed in the  params  Attribute 
    //  In  post  And  put  Request, the parameters are placed directly into the   Object 
  </script>
</body>

</html>

The code that initiates the request to the background (some programmers on the server side of the company don't write it). Front-end programmers are only for examination


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