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>

 

转载于:https://www.cnblogs.com/wxcbg/p/11011561.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值