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

时间: 2024-11-03 21:28:10

axios拦截器使用方法的相关文章

Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import

vue导航守卫和axios拦截器的区别

在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时触发) 我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中. const router = new VueRouter({ ... }) router.beforeEach(

Struts2拦截器、拦截器栈(Interceptor Stack)、全局拦截器与方法拦截器

Struts2拦截器原理 Struts2拦截器是在访问某个Action或Action的方法之前或之后实施拦截.在请求Struts2的Action时,Struts2会查找配置文件,并根据配置文件实例化相应的拦截器对象. Struts2拦截器配置 struts.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Found

Axios拦截器配置

Axios 拦截器的配置如下 分三块:基础配置.请求之前拦截.响应之前拦截 发送所有请求之前和操作服务器响应数据之前对这种情况过滤. http request 请求拦截器 每次发送请求之前判断是否存在 此时要是验证符合条件则通过,否则不符合的不给通过 具体代码如下: html文件 option2.php文件 因为博客园不支持上传js文件 只能截图了 至此,就可以看到结果了,就可以看到控制台的打印信息 原文地址:https://www.cnblogs.com/ddlove/p/9957087.ht

axios拦截器?

// 引入axios以及element ui中的loading和message组件 import axios from 'axios' import { Loading, Message } from 'element-ui' // 超时时间 axios.defaults.timeout = 5000 // http请求拦截器 var loadinginstace axios.interceptors.request.use(config => {  // element ui Loading方

axios拦截器

import axios from "axios"; axios.interceptors.response.use(response => { //=>设置响应拦截器,在AJAX请求成功,执行对应方法之前,把从服务器获取的RESULT(包含了响应主体和响应头等很多信息)中的DATA获取到然后返回,这样在请求成功执行的函数中,再次遇到的RESULT只有响应主体内容 return response.data; }); export{ axios } 没设置之前 返回的data

拦截器getmodel方法什么时候被调用(没搞懂有什么鸟用,自己搭的项目中用到了这个)

拦截器是Struts2最强大的特性之一,它是一种可以让用户在Action执行之前和Result执行之后进行一些功能处理的机制.Struts2 的预定义拦截器 modelDriven 如果action实现了ModelDriven接口,它将getModel方法取得的模型对象存入OgnlValueStack中.

Struts2 拦截器过滤方法

1.struts.xml属性 excludeMethods参数指定拦截器拒绝拦截的方法列表,多个用英文逗号隔开 includeMethods参数指定拦截器需要拦截的方法列表,多个用英文逗号隔开 2.方法拦截器代码 MethodFilterInterceptor抽象类重写了AbstractInterceptor类中的Intercept()方法,还提供了doIntercept(ActionInvocation paramActionInvocation)方法 3.效果 输入地址 http://loc

使用拦截器的方法过滤特性

如果我们希望对Action中的部分方法实现拦截,Struts2为了实现方法过滤的功能,定义了一个名为MethodFilterInterceptor的类,该类继承了AbstractInterceptor.若想自定义的拦截器能够实现方法过滤的功能可以继承MethodFilterInterceptor类,该类重写了父类AbstractInterceptor的intercept方法,又提供了一个doIntercept的抽象方法,在此方法中用户可以自定义拦截器. MethodFilterIntercept