vue 中 get / delete 传递数组参数方法

在前后端交互的时候，有时候需要通过 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)}
    )

到此这篇关于vue 中 get / delete 传递数组参数方法的文章就介绍到这了,更多相关vue 传递数组参数内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• vue中get请求如何传递数组参数的方法示例
• vue中Npm run build 根据环境传递参数方法来打包不同域名
• 详解vue.js之props传递参数
• vue中路由参数传递可能会遇到的坑
• 详解vue嵌套路由-params传递参数

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！