在前后端交互的时候，有时候需要通过 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\', \'c\'] }, { arrayFormat: \'brackets\' })
// 输出结果：\'a[]=b&a[]=c\'
3、qs.stringify({ a: [\'b\', \'c\'] }, { arrayFormat: \'repeat\' })
// 输出结果：\'a=b&a=c\'
4、qs.stringify({ a: [\'b\', \'c\'] }, { 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.stringify(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: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 数据
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\', \'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 请求中，参数要放入到 params 属性下
// 在 post 和 put 请求中，参数直接放入到 对象中
</script>
</body>
</html>
向后台发起请求的代码( 有的公司服务端的程序员不给写 ) 前端程序员仅供才考
app.get(\'/adata\', (req, res) => {
res.send(\'Hello axios!\')
})
app.get(\'/axios\', (req, res) => {
res.send(\'axios get 传递参数\' + req.query.id)
})
app.get(\'/axios/:id\', (req, res) => {
res.send(\'axios get (Restful) 传递参数\' + req.params.id)
})
app.delete(\'/axios\', (req, res) => {
res.send(\'axios get 传递参数\' + req.query.id)
})
app.delete(\'/axios/:id\', (req, res) => {
res.send(\'axios get (Restful) 传递参数\' + req.params.id)
})
app.post(\'/axios\', (req, res) => {
res.send(\'axios post 传递参数\' + req.body.uname + \'---\' + req.body.pwd)
})
app.put(\'/axios/:id\', (req, res) => {
res.send(\'axios put 传递参数\' + req.params.id + \'---\' + req.body.uname + \'---\' + req.body.pwd)
})
© 版权声明
THE END
暂无评论内容