axios拦截器使用方法

Posted 2022-01-05 wxcbg

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>