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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
javascript new后的constructor属性
Aug 05 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
深入研究React中setState源码
Nov 17 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
深入了解JavaScript词法作用域
Jul 29 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基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python获取央视节目单的实现代码
2015/07/25 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python设置环境变量的作用整理
2020/02/17 Python
什么是Python变量作用域
2020/06/03 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
请假条的格式
2014/04/11 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
地雷战观后感
2015/06/09 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js
MySQL 数据 data 基本操作
2022/05/04 MySQL