vue 项目中引入Loading拦截器全局加载

怪我！为什么?

已于 2023-06-30 14:27:31 修改

阅读量866

点赞数 1

文章标签： javascript 前端

于 2023-06-30 10:15:53 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_60847252/article/details/131470557

版权

本文介绍了在Vue项目中如何创建并引入Loading拦截器，实现全局加载效果。首先，需要在项目中创建loading.js，并在request.js中设置拦截器。如果在main.js中引入了element-ui，则可以直接使用其Loading服务；若采用cdn方式引入element-ui，使用Loading时需通过ELEMENT.Loading.service来初始化，并配置lock、text和background等属性。

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

1.创建loading.js文件夹

import { Loading } from "element-ui";
let loading;
/**
 * 打开次数
 */
let needLoadingRequestCount = 0;

/**
 * 打开loading
 */
function startLoading() {
    loading = Loading.service({
        lock: true,
        text: '加载中……',
        background: 'rgba(0, 0, 0, 0.7)'
    })
}

/**
 * 关闭loading
 */
function endLoading() {
    needLoadingRequestCount = 0;
    loading.close()
}

/**
 * 开启loading
 */
let showFullScreenLoading = () => {
    if (needLoadingRequestCount === 0) {
        startLoading()
    }
    needLoadingRequestCount++;
}
/**
 * 取消loading
 */
let tryHideFullScreenLoading = () => {
    //if (needLoadingRequestCount <= 0) return
    needLoadingRequestCount--;
    if (needLoadingRequestCount <= 0) {
        endLoading()
    }
}

export { showFullScreenLoading, tryHideFullScreenLoading }

2.在拦截器在使用 request.js

import { showFullScreenLoading, tryHideFullScreenLoading } from './loading'
//1. 创建新的axios实例，
let baseURL = 'http.........'
const service = axios.create({
  baseURL: baseURL,
  // 超时时间 单位是ms，这里设置了3s的超时时间
  timeout: 3 * 1000,
});

// 2.请求拦截器
service.interceptors.request.use(
  (config) => {
    NProgress.start();
    showFullScreenLoading()
    return config;
  },
  (error) => {
    tryHideFullScreenLoading()
    return Promise.reject(error);
  }
)
// 3.响应拦截器
service.interceptors.response.use(
  (response) => {
    tryHideFullScreenLoading()
    //接收到响应数据并成功后的一些共有的处理，关闭loading等
    NProgress.done();
    return response;

  },
  (error) => {
    tryHideFullScreenLoading()
    if (error && error.response) {
      // 1.公共错误处理
      // 2.根据响应码具体处理
      NProgress.done();
    } else {
      // 超时处理
    }
  }
)

//4.导入文件
export default http;

注释
1.在vue项目中main.js引入element-ui 才可以使用
2.如果是cdn引入element-ui ，loading.js中使用 Loading 会有问题

  configureWebpack: {
    externals: {
      // CDN 的 Element 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
      'vue': 'Vue',
      // 属性名称 element-ui, 表示遇到 import xxx from 'element-ui' 这类引入 'element-ui'的，
      // 不去 node_modules 中找，而是去找 全局变量 ELEMENT
      'element-ui': 'ELEMENT',
      'vuex': 'Vuex',
      'axios': 'axios'
    }
  }

需要改成 loading = ELEMENT.Loading.service({
lock: true,
text: '加载中……',
background: 'rgba(0, 0, 0, 0.7)'
})