import axios from 'axios' import {Notice, Message} from 'iview'; import { Loading } from 'element-ui'; import * as util from '../assets/utils' import Vue from 'vue'; // 创建axios实例 const service = axios.create({ timeout: 15000, // 请求超时时间 // baseURL: '/zuul' }); let loading //定义loading变量 export function startLoading() { //使用Element loading-start 方法 loading = Loading.service({ lock: true, text: '加载中……', background: 'rgba(0, 0, 0, 0.7)' }) } export function endLoading() { //使用Element loading-close 方法 loading.close(); } function successMessage(msg) { Message.success(msg); } export function errorMessage(msg) { Notice.error({ title: '错误提示', desc: msg, duration: 6 }); } //session状态提示信息方法 export function SessionStatusMessage(msg) { Notice.error({ title: '长时间没有操作,请重新登录...', desc: msg, duration: 6 }); } // Request 拦截器 service.interceptors.request.use((config) => { let access_token = util.getAccessToken() config.url = config.url + '?access_token='+access_token startLoading() return config; }, error => { endLoading() // Do something with request error console.log(error); // for debug return Promise.reject(error); }); // Response 拦截器 service.interceptors.response.use( (response) => { endLoading() const ret = response.data; // 业务级异常 if (response.status !== 200) { errorMessage(ret.message); return Promise.reject(ret); // 破坏promise链, reject之后的promise不在执行then(),而是直接调用catch() } else if (response.status === 401) { console.log(ret.message) } return Promise.resolve(response); }, (error) => { endLoading() const ret = error.response; // 系统级异常 if (ret.status === 400) { //errorMessage(ret.data.error_description || error.message); // 登陆失败、参数错误等 SessionStatusMessage(ret.data.error_description || error.message); window.location.href = util.getPath() } else if (ret.status === 403 || ret.status === 401) { if(ret.data.error.indexOf('invalid_token') !== -1){ sessionStorage.clear() window.location.href = util.getPath() } errorMessage(ret.data.message); // 无访问权限 } else { errorMessage('异常:[' + error.message + ']'); } return Promise.reject(error); } ); export default service
vue+axios+element ui 实现全局loading加载
最新推荐文章于 2025-03-11 19:02:48 发布