vue 中 get / delete 傳遞陣列引數方法
阿新 • • 發佈:2021-03-28
在前後端互動的時候,有時候需要通過 get 或者 delete 傳遞一個數組給後臺,但是這樣直接傳遞後臺無法接收資料,因為在傳遞的過程中陣列引數會被轉譯,結果如下:
引數:{ name : [ 1,2,3 ] }
轉譯效果:http://aaa.com?name[]=1&name[]=2&name[]=3
目標效果:http://aaa.com?name=1&name=2&name=3
解決辦法:
使用 qs 外掛 將陣列引數序列化
1、qs.stringify({ a: ['b','c'] },{ arrayFormat: 'indices' }) // 輸出結果:'a[0]=b&a[1]=c' 2、qs.stringify({ a: ['b',{ arrayFormat: 'brackets' }) // 輸出結果:'a[]=b&a[]=c' 3、qs.stringify({ a: ['b',{ arrayFormat: 'repeat' }) // 輸出結果:'a=b&a=c' 4、qs.stringify({ a: ['b',{ arrayFormat: 'comma' }) // 輸出結果:'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.str程式設計客棧ingify(params,{ arrayFormat: 'repeat' }) } } return request },(error) =>{ return Promise.reject(error); })
知識點擴充套件:vue中 的Get,Delete,Post,Put 傳遞引數
剛剛接觸Vue2.5以上版本的新手程式設計師 不瞭解怎樣傳遞引數的僅供參考
<!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請求引數傳遞 // axios get請求傳參 // 傳統格式的 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) }) // 攜帶引數的 get 請求 axios.get('http://localhost:300www.cppcns.com0/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 資料 axios.post('http://localhost:3000/axios',{ 'uname': 'lisi','pwd': 123 }).then(function(ret) { console.log(ret.data) }) // 使用 axios 進行 post 請求,傳遞 form 表單資料 var params = new URLSearchParams(); params.append('uname','zhangsa程式設計客棧n'); 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 請求中,引數要放入到 params 屬性下 // 在 post 和 put 請求中,引數直接放入到 物件中 </script> </body> </html>
向後臺發起請求的程式碼( 有的公司服務端的程式設計師不給寫 ) 前端程式設計師僅供才考
app.get('/adata',(req,res) => {
res.send('Hello axios!')
})
app.get('/axios',res) => {
res.send('axios get 傳遞引數' + req.query.id)
})
app.get('/axios/:id',res) => {
res.send('axios get (Restful) 傳遞引數' + req.params.id)
})
app.delete('/axios',res) => {
res.send('axios get 傳遞引數' + req.query.id)
})
app.delete('/axi程式設計客棧os/:id',res) => {
res.send('axios get (Restful) 傳遞引數' + req.params.id)
})
app.post('/axios',res) => {
res.send('axios post 傳遞引數' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id',res) => {
res.send('axios put 傳遞引數' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})
到此這篇關於vue 中 get / delete 傳遞陣列引數方法的文章就介紹到這了,更多相關vue 傳遞陣列引數內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!