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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
javascript GUID生成器实现代码
Oct 31 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
python使用requests.session模拟登录
2019/08/09 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
生产厂厂长岗位职责
2013/12/25 职场文书
个性与发展自我评价
2014/02/11 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
公司承诺书格式
2014/05/21 职场文书
运动会演讲稿200字
2014/08/25 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
走进毛泽东观后感
2015/06/04 职场文书