码迷,mamicode.com
首页 > 移动开发 > 详细

axios拦截器使用方法

时间:2019-06-12 19:42:44      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:发送   btn   cat   from   alert   span   vco   orm   url   

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>

 

axios拦截器使用方法

标签:发送   btn   cat   from   alert   span   vco   orm   url   

原文地址:https://www.cnblogs.com/wxcbg/p/11011561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!