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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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网站提速三大“软”招
2006/10/09 PHP
php include,include_once,require,require_once
2008/09/05 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
Python单例模式实例分析
2015/01/14 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Django组件content-type使用方法详解
2019/07/19 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
Django实现随机图形验证码的示例
2020/10/15 Python
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
初三化学教学反思
2016/02/22 职场文书