Vue 请求传公共参数的操作


Posted in Javascript onJuly 31, 2020

我就废话不多说了,大家还是直接看代码吧~

// An highlighted block
//http request拦截器
axios.interceptors.request.use(
	config =>{
  const token = window.sessionStorage.getItem('Tk_token')
  const user_id=window.sessionStorage.getItem('Tk_user_id')

 // config.data = JSON.stringify(config.data);
 // config.headers = {
 //  'Content-Type':'application/x-www-form-urlencoded'
 // }
  if(token){
   config.params = {'token':token,'user_id':user_id}
  }
  console.log(config);
		return config;
	},
	err =>{
		return Promise.reject(err);
	}
)

补充知识:Vue联合axios发送后台post请求时的参数问题

开始用的是vue-resource,后来发现这个已经很久没有更新了,作者已经停止更新了,而且就连作者也推荐用axios,那么我就用axios吧,改成axios之后,就出现了一个问题:参数问题。

怎么个参数问题呢?用vue-response来发送post请求的时候,传入的参数到后台是一个一个分开的,比如传了参数

{
  username:'name1',
  password:'pwd1'
}

就是很简单的用户名和密码,vue-resource传到后台之后,后台的接口方法参数是两个,一个是username,一个是password,都可以分别取到;但是axios不同,axios到后台之后,是一个map结构的对象,需要用@RequestBody Map map这种方式来获取,然后从map中一个一个取出来,这样也可以。但是有没有办法让axios传给后台的参数也是一个一个的呢?当然有。

第一个方法就是URLSearchParams,用这个添加好参数,到后台就是一个一个的,但是这个IE不支持。

还有一个办法,就是qs,qs的话有两种引入方式,一种就是用npm安装好后,直接import,然后就可以用了;另一种就是在页面直接引入qs.js,就是<script src='js/qs.js'></script>这种方式,然后

注意了!

这里要注意了!

如果是import方式引入的,我们就用qs.stringify调用就好了,但是!!!

注意了!

如果是js文件引入的方式,用的Qs,不是qs,Q是大写的Q,也就是Qs.stringify。

然后就可以了!

以上这篇Vue 请求传公共参数的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 树形结构的选择器
Feb 15 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
puppeteer库入门初探
Jan 09 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 #Javascript
vue实现公共方法抽离
Jul 31 #Javascript
js实现无缝轮播图插件封装
Jul 31 #Javascript
原生js滑动轮播封装
Jul 31 #Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 #Javascript
jquery轮播图插件使用方法详解
Jul 31 #jQuery
在Uni中使用Vue的EventBus总线机制操作
Jul 31 #Javascript
You might like
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
jquery中对表单的基本操作代码
2010/07/29 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python 修改列表中的元素方法
2018/06/26 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Python根据成绩分析系统浅析
2019/02/11 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
单身联谊活动方案
2014/01/29 职场文书
保安岗位职责
2014/02/21 职场文书
给校长的建议书500字
2014/05/15 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL
vue递归实现树形组件
2022/07/15 Vue.js