axios拦截器使用方法

心已赠人 2021-12-21 15:51 237阅读 0赞

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>  
　　  
　　<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>

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