vue 中 get / delete 傳遞數(shù)組參數(shù)方法

更新時間：2021年03月22日 09:54:31 作者：三個木馬人

這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

在前后端交互的時候，有時候需要通過 get 或者 delete 傳遞一個數(shù)組給后臺，但是這樣直接傳遞后臺無法接收數(shù)據(jù)，因為在傳遞的過程中數(shù)組參數(shù)會被轉(zhuǎn)譯，結(jié)果如下：

參數(shù)：{ name : [ 1, 2, 3 ] }
轉(zhuǎn)譯效果：http://aaa.com?name[]=1&name[]=2&name[]=3
目標效果：http://aaa.com?name=1&name=2&name=3

解決辦法：

使用 qs 插件將數(shù)組參數(shù)序列化

1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 輸出結(jié)果：'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 輸出結(jié)果：'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 輸出結(jié)果：'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 輸出結(jié)果：'a=b,c'

安裝

npm install qs

使用

//在 axios 請求攔截器里面
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);
})

知識點擴展：Vue中的Get , Delete , Post , Put 傳遞參數(shù)

剛剛接觸Vue2.5以上版本的新手程序員不了解怎樣傳遞參數(shù)的僅供參考

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

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

<body>
/*為了前后端更好的交互效果 引入axios.js 這個js文件*/
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    // axios請求參數(shù)傳遞

    // axios get請求傳參
    // 傳統(tǒng)格式的 get 請求
     axios.get('http://localhost:3000/axios?id=123')
      .then(function(ret){
      console.log(ret.data)
     })
     // restful 格式的 get 請求
     axios.get('http://localhost:3000/axios/123')
      .then(function(ret){
      console.log(ret.data)
     })
     // 攜帶參數(shù)的 get 請求
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret) {
      console.log(ret.data)
    })

    // // axios delete 請求傳參
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret) {
      console.log(ret.data)
    })

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

    // 使用 axios 進行 post 請求,默認傳遞 json 數(shù)據(jù)
    axios.post('http://localhost:3000/axios', {
        'uname': 'lisi',
        'pwd': 123
      }).then(function(ret) {
        console.log(ret.data)
      })
      // 使用 axios 進行 post 請求,傳遞 form 表單數(shù)據(jù)
       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 請求傳參
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret) {
      console.log(ret.data)
    })



    // 對于 axios 來說，在 get 和 delete 請求中，參數(shù)要放入到 params 屬性下
    // 在 post 和 put 請求中，參數(shù)直接放入到 對象中
  </script>
</body>

</html>

向后臺發(fā)起請求的代碼( 有的公司服務(wù)端的程序員不給寫 ) 前端程序員僅供才考

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

到此這篇關(guān)于vue 中 get / delete 傳遞數(shù)組參數(shù)方法的文章就介紹到這了,更多相關(guān)vue 傳遞數(shù)組參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: