当前位置:首页 > 前端 > Vue.js

vue axios get方法请求如何发送数组参数

简述

axios 作为vue函数库里面优秀的网络请求库,项目中使用频率非常高,但get在传送数组需要设置一下,因为所有的参数都是以url的方式发送。看看get例子吧。

错误的方式

先安装并引入axios

  1. npm install qs --save
  1. import axios from 'axios'

原始未处理的案例如下:

  1. axios.get('you url',{
  2. idArr: [1,2,3],
  3. type: 1
  4. }).then((res) => {})

请求地址会是如下形式:you url?idArr[]=1&idArr[]=2&idArr[]=3&type=1

正确的方式

安装qs库

  1. npm install qs --save

引入qs库

  1. import qs from 'qs'
get 配合paramsSerializer使用方法如下:
  1. axios.get('you url',{
  2. idArr: [1,2,3],
  3. type: 1,
  4. paramsSerializer: params => {
  5. return qs.stringify(params, { indices: false })
  6. }
  7. }).then((res) => {})

请求地址最终转换成如下形式:you url?idArr=1&idArr=2&idArr=3&type=1

post/put配合paramsSerializer()和qs.stringify()使用方法如下:
  1. axios.post(url, qs.stringify(
  2. params: {
  3. idArr: [1,2,3],
  4. type: 1
  5. }, { indices: false }))
  1. axios.put(url, qs.stringify(params: {
  2. idArr: [1,2,3],
  3. type: 1
  4. }, { indices: false }))

请求地址最终转换成如下形式:you url?idArr=1&idArr=2&idArr=3&type=1

qs.stringify最多可以配合转换成4种形式

  1. qs.stringify({idArr: [1, 2, 3]}, { indices: false })
  2. //形式: idArr=1&idArr=2&idArr=3
  3. qs.stringify({idArr: [1, 2, 3]}, {arrayFormat: 'indices'})
  4. //形式: idArr[0]=1&idArr]=2&idArr[2]=3
  5. qs.stringify({idArr: [1, 2, 3]}, {arrayFormat: 'brackets'})
  6. //形式:idArr[]=1&idArr[]=2&idArr[]=3
  7. qs.stringify({idArr: [1, 2, 3]}, {arrayFormat: 'repeat'})
  8. //形式: idArr=1&idArr=2&idArr=3

题外:关于文中的qs库

qs库是一个非常强大的函数库,不只是这么点技能,有兴趣可以直接到网上了解下。
npm qs: https://www.npmjs.com/package/qs

读后有收获可以支付宝请作者喝咖啡
< 上一篇 下一篇 >
文章评论
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部