Vue 请求传公共参数的操作

 更新时间:2020年07月31日 11:45:13   作者:Brian_Jing  
这篇文章主要介绍了Vue 请求传公共参数的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

// 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 请求传公共参数的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue异步组件使用详解

    Vue异步组件使用详解

    这篇文章主要为大家详细介绍了Vue异步组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Vue3进阶主题Composition API使用详解

    Vue3进阶主题Composition API使用详解

    这篇文章主要为大家介绍了Vue3进阶主题Composition API使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue3 学习笔记之axios的使用变化总结

    vue3 学习笔记之axios的使用变化总结

    本篇文章主要旨在帮助正在学vue3或者准备学vue3的同学了解网络请求axios该如何使用,防止接触了一点点vue3的同学会有个疑问。有兴趣的小伙伴可以关注一下
    2021-11-11
  • 在pycharm中开发vue的方法步骤

    在pycharm中开发vue的方法步骤

    这篇文章主要介绍了在pycharm中开发vue的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue3点击按钮下载文件功能的代码实现

    vue3点击按钮下载文件功能的代码实现

    在写vue项目时,有个需求是点击表格中某一行的下载按钮,然后开始下载这一行对应的文件,所以本文小编给大家介绍了使用vue3实现点击按钮下载文件功能,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2024-01-01
  • vue el-switch初始值(默认值)不能正确显示状态问题及解决

    vue el-switch初始值(默认值)不能正确显示状态问题及解决

    这篇文章主要介绍了vue el-switch初始值(默认值)不能正确显示状态问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue动态样式绑定实例详解

    Vue动态样式绑定实例详解

    众所周知vue是操作dom元素的,那么如果有元素要动态绑定样式,这种需求,还是要通过改变数据来改变视图的样式,下面这篇文章主要给大家介绍了关于Vue动态样式绑定的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue定义模态框的方法

    vue定义模态框的方法

    这篇文章主要为大家详细介绍了vue定义模态框的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue.js中导出Excel表格的案例分析

    vue.js中导出Excel表格的案例分析

    这篇文章主要介绍了vue.js中如何导出Excel表格,在项目中经常会遇到这样的需求,今天小编分步骤通过实例代码给大家详细介绍,需要的朋友可以参考下
    2019-06-06
  • Vue3 defineModel的使用示例详解

    Vue3 defineModel的使用示例详解

    文章介绍了vue中向子组件传值并允许修改的机制,通过defineModel实现双向绑定,它返回一个ref,并且可以配置底层prop的选项,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2025-01-01

最新评论