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拦截器使用方法的更多相关文章

  1. axios拦截器的使用方法

    很多时候我们需要在发送请求和响应数据的时候做一些页面处理,比如在请求服务器之前先判断以下用户是登录(通过token判断),或者设置请求头header,或者在请求到数据之前页面显示loading等等,还 ...

  2. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  3. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  4. vue导航守卫和axios拦截器的区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...

  5. 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 ...

  6. AOP 貌似是拦截器 对方法进行拦截

    AOP 貌似是拦截器 对方法进行拦截

  7. axios拦截器搭配token使用

    在了解到cookie.session.token的作用后学习token的使用 cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session ...

  8. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

  9. Axios拦截器配置

    Axios 拦截器的配置如下 分三块:基础配置.请求之前拦截.响应之前拦截 发送所有请求之前和操作服务器响应数据之前对这种情况过滤. http request 请求拦截器 每次发送请求之前判断是否存在 ...

随机推荐

  1. Docker pull 出现的 error pulling image configuration: Get https://dseasb33srnrn.cloudfront.net/

    vim /etc/sysconfig/docker OPTIONS='--selinux-enabled --log-driver=journald --signature-verification= ...

  2. Delphi编译器属性(特别修饰符Ref,Unsafe,Volatile,Weak)

    1 Refdelphi中常量参数就像一个本地常量,或者说只读变量.常量参数与值参数类似,除了不能在过程或函数体内给常量参数赋值,并且不能将常量参数传给另一个var类型参数.(但是,如果你常量参数传递的 ...

  3. springMVC接受json类型数据

    springMVC接受json格式的数据很简单 使用@RequestBody 注解,标识从请求的body中取值 服务端示例代码 @RequestMapping(value = "/t4&qu ...

  4. SqlServer学习之触发器

    什么是触发器? 根据百度百科的解释,触发器是SqlServer提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊的存储过程,他的执行不是有程序调用,也不是手工启动,而是由事件来 ...

  5. 前端性能优化-Vue代码层面

    1.v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建:也是惰性的:如果在初始渲染时条件为假,则什么也不做 ...

  6. SQL生成自动序号 带有占位符(掩码),可以调整占位长度的语句

    MSSQL 语句 --声明变量 DECLARE @i int DECLARE @xh varchar(10) DECLARE @name varchar(10) Set @i = 0 --开始循环插入 ...

  7. Arcgis for js加载百度地图

    看转:https://blog.csdn.net/qq_41046162/article/details/80248281 通过学习了一段时间的arcgis for js,让我来讲一下如何在arcgi ...

  8. octave 笔记

    1. 画函数 >> x = [-4:0.5:6] >> y = x.^2 - x - 6 >> plot(y)

  9. asp.net core 中hangfire面板的配置及使用

    1.定义校验授权类DyDashboardAuthorizationFilter /// <summary> /// Hangfire仪表盘配置授权 /// </summary> ...

  10. 通过hadoop上的hive完成WordCount

    1.启动hadoop 打开所有命令:start-all.sh 2.Hdfs上创建文件夹 创建名为PGOne到user/hadoop 3.上传文件至hdfs 创建和修改508.txt文件,里面尽量多写一 ...