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

巴特西

axios拦截器使用方法

最新文章

热门文章