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 : ‘‘ this.merchantID = userinfo ? userinfo.merchantID : ‘‘ }, 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>