Vue axios全局拦截 get请求、post请求、配置请求的实例代码


Posted in Javascript onNovember 28, 2018

下面通过一段代码给大家介绍Vue axios全局拦截 get请求、post请求、配置请求,具体代码如下所述:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../node_modules/vue/dist/vue.js"></script>
 <script src="../node_modules/axios/dist/axios.js"></script>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
 <h1>axios插件讲解</h1>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" v-on:click="get">Get请求</a>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" v-on:click="post">Post请求</a>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" v-on:click="http">http</a>
 <div>
 <span>{{this.msg}}</span>
 </div>
</div>
<script>
 new Vue({
 el: '#app',
 data: {
  msg: ''
 },
 mounted () {
  // 请求拦截
  axios.interceptors.request.use(config => {
  return config
  },error => {
  return Promise.reject(error)
  })
  axios.interceptors.response.use(response => {
  // 预处理相应的数据
  return response
  }, error => {
  // 错误返回 状态码验证
  return Promise.reject(error)
  })
 },
 methods: {
  get () {
  axios.get('../package1.json', {
   params: {
   userId: '999'
   },
   headers: {
   token: 'jack'
   }
  }).then(res => {
   this.msg = res.data
  }).catch(error => {
   console.log('error init.' + error)
  })
  },
  post () {
  axios.post('../package.json', {
   userId: '888'
  },{
   headers: {
   token: 'tom'
   }
  }).then(res => {
   this.msg = res.data
  }).catch(error => {
   console.log('error init.' + error)
  })
  },
  http () {
  // 配置请求
  axios({
   url: '../package.json',
   method: 'get',
   // if method is post
   data: {
   userId: '101'
   },
   // if method is get
   params: {
   userId: '102'
   },
   headers: {
   token: 'http-test'
   }
  }).then(res => {
   this.msg = res.data
  }).catch(error => {
   console.log('error init.' + error)
  })
  }
 }
 })
</script>
</body>
</html>

ps:下面看下vue axios数据请求get、post方法的使用

我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法

vue中使用axios方法我们先安装axios这个方法

npm install --save axios

安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下。

import axios from 'axios'

引入之后我们就可以进行数据请求了,在methods中创建一个方法

methods:{
 getInfo(){
  let url = "url"
  axios.get(url).then((res)=>{
   console.log(res)
  })  
 } 
}

然后我们在mounted这个生命周期中进行调用

mounted(){
  this.getInfo() 
 }

这样就可以在控制台中查看数据,以上是一个简单的get方法数据请求,下面继续介绍一下post方法的使用,其实post和get的使用没有什么区别只是再加上一个参数就可以了,看一下我们的代码

methods:{
 postInfo(){
  let url = "url"
  let params=new URLSearchParams();//这个方法在axios的官网中有介绍,除了这个方法还有qs这个方法
  params.append("key",index) 
  params.append("key",index)
  axios.post(url,params).then((res)=>{
   console.log(res)
  })
 } 
}

同样在mounted这个生命周期中进行调用

mounted(){
  this.postInfo()
 }

总结

以上所述是小编给大家介绍的Vue axios全局拦截 get请求、post请求、配置请求的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
JSON相关知识汇总
Jul 03 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
vue与原生app的对接交互的方法(混合开发)
Nov 28 #Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 #Javascript
vue实现微信分享功能
Nov 28 #Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 #Javascript
详解小程序rich-text对富文本支持方案
Nov 28 #Javascript
微信小程序实现简单评论功能
Nov 28 #Javascript
You might like
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
为什么会有内存对齐
2016/10/10 面试题
啤酒销售实习自我鉴定
2013/09/24 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
优秀创业计划书分享
2019/07/19 职场文书
详解pytorch创建tensor函数
2022/03/22 Python