loading加载和统一异常处理

最新推荐文章于 2024-07-31 16:39:12 发布

cc&

最新推荐文章于 2024-07-31 16:39:12 发布

阅读量1.5k

点赞数

分类专栏：前后端分离文章标签： vscode

本文链接：https://blog.youkuaiyun.com/grow_/article/details/124303638

版权

前后端分离专栏收录该内容

25 篇文章

订阅专栏

本文档展示了如何在Vue项目中利用ElementUI的Loading组件进行数据加载时的显示和隐藏，并在axios的请求和响应拦截器中进行统一的加载效果管理和异常处理。通过单例模式确保加载动效的正确显示与关闭，确保了用户体验的流畅性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

loading加载

1.按需导入 ElementUI 组件 Loading

2.加载数据时，打开和关闭对象（注意： loadingInstance 实例采用单例模式创建，防止响应异常时频繁切换路由时加载动效重复创建）

3.请求拦截器中打开加载效果, 响应拦截器和异常中关闭加载效果.

统一异常处理

在响应拦截器中设置

加载和统一异常处理的完整代码：

import axios from 'axios';
import { Loading, Message } from 'element-ui';

const loading = {
  loadingInstance: null, //loading实例
  // 打开加载
  open: function () {
    // 创建实例，而且会加载窗口
    if (this.loadingInstance === null) {
      //采用单例
      this.loadingInstance = Loading.service({
        target: '.main',
        text: '拼命加载中'
      });
    }
  },

  // 关闭加载
  close: function () {
    // 不为空时，则关闭加载窗口
    if (this.loadingInstance !== null) {
      this.loadingInstance.close();
    }
    this.loadingInstance = null;
  }
};
const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000 //请求超时，5000毫秒
});
// 请求拦截器
request.interceptors.request.use(
  (config) => {
    // 请求拦截
    // 打开加载窗口
    loading.open();
    return config;
  },
  (error) => {
    // 关闭加载窗口
    loading.close();
    return Promise.reject(error);
  }
);

// 响应拦截器
request.interceptors.response.use(
  (response) => {
    // 响应拦截
    // 关闭加载窗口
    loading.close();

    const resp = response.data;
    // 后台正常响应的状态，如果不是2000，说明后台处理有问题
    if (resp.code !== 2000) {
      Message({
        message: resp.message || '系统异常',
        type: 'warning',
        duration: 5 * 1000
      });
    }
    return response;
  },
  (error) => {
    // 关闭加载窗口
    loading.close();

    //断网会出现这样的错误 |请求路径错误
// 当请求接口出错时, 进行弹出错误提示, 如 404, 500, 请求超时
console.log('response error', error.response.status) 
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

export default request;