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. 泛型和DataTable的属性

    泛型转DataTable public DataTable ToDataTable<TResult>(this IEnumerable<TResult> value) wher ...

  2. linux 打包与解压命令--常用

    一般情况用这俩个就足以了 压缩 tar -czf jpg.tar.gz *.jpg   //将目录里所有jpg文件打包成jpg.tar后,并且将其用gzip压缩,生成一个gzip压缩过的包,命名为jp ...

  3. ES6模块化及优点,简单案例让你秒懂

    模块化:模块是一个文件     好处:         1.减少命名冲突         2.避免引入时的层层依赖         3.可以提升执行效率     **第一种方法************ ...

  4. navigateTo防止多次跳转

    “wx.navigateTo” 页面跳转.在有网络延迟时多次点击会产生 多次二级页面 再使用wx.navigateBack就会多次返回到之前那页面 解决办法: 点击之前标个状态true 点击之后跳转路 ...

  5. 17.SpringMVC核心技术-拦截器

    SpringMVC 中的 Interceptor 拦截器是非常重要和相当有用的,它的主要作用是拦截指定 的用户请求, 并进行相应的预处理与后处理.其拦截的时间点在“处理器映射器根据用户提 交的请求映射 ...

  6. CAFFE(一):Ubuntu 下安装CUDA(安装:NVIDIA-384+CUDA9.0+cuDNN7.1)

    (安装:NVIDIA-384+CUDA9.0+cuDNN7.1) 显卡(GPU)驱动:NVIDIA-384 CUDA:CUDA9.0 cuDNN:cuDNN7.1 Ubuntu 下安装CUDA需要装N ...

  7. C#DataGrid列值出现E形式的小数,将DataGrid表格上的数据保存至数据库表时会因格式转换不正确导致报错

    问题描述:在DataGridView中调整金额一列,当输入小数0.000001后会显示1E-6,此时进行保存操作时报错,提示无法将string类型转换成Decimal 原因分析:由于列调整金额为1E- ...

  8. org.apache.tomcat.util.descriptor.web.WebXml.setVersion Unknown version string [4.0]

    错误: 在 IDEA 创建WEB项目之后,打印出的日志中总是出现一行警告信息: 12-May-2018 15:52:30.692 警告 [RMI TCP Connection(3)-127.0.0.1 ...

  9. PAT Basic 1087 有多少不同的值 (20 分)

    当自然数 n 依次取 1.2.3.…….N 时,算式 ⌊ 有多少个不同的值?(注:⌊ 为取整函数,表示不超过 x 的最大自然数,即 x 的整数部分.) 输入格式: 输入给出一个正整数 N(2). 输出 ...

  10. [USACO14OPEN]GPS的决斗Dueling GPS's

    题目概况 题目描述 给你一个\(N\)个点的有向图,可能有重边. 有两个\(GPS\)定位系统,分别认为经过边\(i\)的时间为\(P_i\),和\(Q_i\). 每走一条边的时候,如果一个系统认为走 ...