vue axios get in the back-end interface data sometimes needs to be displayed when requesting start loading, after the request to hide loading, this time to adjust the interface each time they are written on a little tedious, sometimes leak to write.
This time axios interceptor to play a role, we can operate the server in response to filter data before this situation before sending all requests. Interceptor is defined as follows:
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: 'Loading ...' , spinnerType: 'fading-circle' }) return config }, err => { Indicator.close() Toast({ Message: 'loading timeout' , 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 page references are as follows
<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: '' } }, // listening verifycode value change can click on the toggle button 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 ( 'interfaces URL' , { loginName: this.loginName, vcode: this.verifycode, Email: this.email }) .then(response => { var data = response.data if (data.result.returnCode == '0') { MessageBox.alert ( 'has been sent, please check') .then (Action => { vm.$router.go(-2) }) } else { Toast(data.result.resultMsg) this.$refs.vcode.getVcode() } }) .catch(error => {}) } } } </script>