axios拦截器使用方法
vue中axios获取后端接口数据有时候需要在请求开始时显示loading,请求结束后隐藏loading,这时候到每次调接口时都写上有点繁琐,有时候还会漏写。
这时候axios的拦截器就起了作用,我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。定义拦截器如下:
import Vue from 'vue'
import axios from 'axios'
import { Indicator } from 'mint-ui'
import { Toast } from 'mint-ui'
import { getBaseUrl } from './util'
axios.defaults.timeout = 30000
axios.defaults.baseURL = getBaseUrl()
axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'
//http request 拦截器
axios.interceptors.request.use(
config => {
Indicator.open({
text: '加载中...',
spinnerType: 'fading-circle'
})
return config
},
err => {
Indicator.close()
Toast({
message: '加载超时',
position: 'middle',
duration: 3000
})
return Promise.reject(err)
}
) //http response 拦截器
axios.interceptors.response.use(
response => {
Indicator.close()
return response
},
error => {
Indicator.close()
return Promise.reject(error)
}
)
页面js引用如下
<template>
<div>
<!-- <article class="h48">
<mt-header fixed title="邮箱确认">
<router-link to="-1" slot="left">
<mt-button icon="back"></mt-button>
</router-link>
</mt-header>
</article> -->
<div class="content">
<div class="mail-info-txt">
<p>注册邮箱:{{email}}</p>
</div>
<div class="mailconfirm_form">
<div class="fill-in-list">
<Verifycode ref="vcode" v-model="verifycode" v-on:vcodeguid="handleVcodeguid"></Verifycode>
</div>
<mt-button type="primary" size="large" :class={active:isActive} @click="resetpsd" :disabled="isBtnDisable"> 发送到该邮箱 </mt-button>
</div>
</div>
</div>
</template>
<script>
import { Toast } from 'mint-ui'
import { MessageBox } from 'mint-ui'
import '../utils/http' //调用拦截器
import { createguid, getStore, getCookie } from '../utils/util'
import axios from 'axios'
import Verifycode from '@/components/verifycode' export default {
data() {
return {
email: '',
verifycode: '',
loginName: '',
isBtnDisable: true,
isActive: false,
imgcode: ''
}
},
//监听verifycode值变化切换按钮能否点击
watch: {
verifycode: function(val) {
if (val) {
this.isBtnDisable = false
this.isActive = true
} else {
this.isBtnDisable = true
this.isActive = false
}
}
},
created: function() {
let userinfo = JSON.parse(getCookie('userInfo'))
this.email = userinfo ? userinfo.email : ''
this.loginName = userinfo ? userinfo.loginName : ''
},
components: {
Verifycode
},
methods: {
handleVcodeguid: function(guid) {
this.captchaRequestId = guid
},
resetpsd: function() {
let vm = this
axios
.post('接口url', {
loginName: this.loginName,
vcode: this.verifycode,
Email: this.email
})
.then(response => {
var data = response.data
if (data.result.returnCode == '0') {
MessageBox.alert('已发送,请注意查收').then(action => {
vm.$router.go(-2)
})
} else {
Toast(data.result.resultMsg)
this.$refs.vcode.getVcode()
}
})
.catch(error => {})
}
}
}
</script>
axios拦截器使用方法的更多相关文章
- axios拦截器的使用方法
很多时候我们需要在发送请求和响应数据的时候做一些页面处理,比如在请求服务器之前先判断以下用户是登录(通过token判断),或者设置请求头header,或者在请求到数据之前页面显示loading等等,还 ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- vue导航守卫和axios拦截器的区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...
- 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +
(1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...
- AOP 貌似是拦截器 对方法进行拦截
AOP 貌似是拦截器 对方法进行拦截
- axios拦截器搭配token使用
在了解到cookie.session.token的作用后学习token的使用 cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session ...
- Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...
- Axios拦截器配置
Axios 拦截器的配置如下 分三块:基础配置.请求之前拦截.响应之前拦截 发送所有请求之前和操作服务器响应数据之前对这种情况过滤. http request 请求拦截器 每次发送请求之前判断是否存在 ...
随机推荐
- 怎样查看或修改元素节点的id属性
使用 el.id; el表示获取到的元素节点, 如下所示: // HTML 代码 // <div id="app" class="c1">hello ...
- NVIDIA双显卡
NVIDIA双显卡 第一步:代码:sudo update-pciids #更新显卡信息非常重要,否则可能识别出错lspci -v | grep -i vga #察看显卡 我的显卡信息如下:代码:00: ...
- wordpress程序打开太慢的解决方案(一步搞定)
周末两天没有打开自己的赵一鸣随笔博客,今天访问了一下,打开速度太慢了,看看浏览器栏目,网站标题已经显示出来了,但是网页却是一片空白,什么都没有,刚开始以为是我们公司网速的问题,就没有特别注意这件事情. ...
- 【Day3】5.Python中的lxml模块
import lxml.etree as le with open('edu.html','r',encoding='utf-8') as f: html = f.read() html_x = le ...
- PendSV异常介绍、用于上下文切换
在这里,非常感谢<cortex-cm3权威指南>的翻译者. PendSV 的典型使用场合是在上下文切换时(在不同任务之间切换). 例如, 一个系统中有两个就绪的任务,上下文切换被触发的场合 ...
- Linux磁盘及文件系统管理1
RHCSA认证中的东西: Linux系统管理包括的内容有: 磁盘分区及文件系统管理 RAID LVM 网络属性管理 程序包管理 sed and awk 进程查看和管理 内核管理(编译和安装) 系统启动 ...
- 移动端meta常用的设置
1.qq强制横屏或者竖屏显示 : <meta name="x5-orientation" content="portrait ||andscape&quo ...
- Python---安装路径查看
python是解释型脚本语言,在执行时,逐句解释执行,不需要进行预编译.但需要有自身的Python解释器. 所以在执行Python代码时,需要指定python解释器. 指定解释器方法: 在文件开头 ...
- Collection 和 Collections 有什么区别?(未完成)
Collection 和 Collections 有什么区别?(未完成)
- 第一节:python读取excel文件
写在前面: (1)Excel中数字格式int(1),读出的是float(1.0)类型,导致传参时造成不同,强制转换时,int(str(1.0))在2.7版本又会报错ValueError: invali ...