526互联

vue js axios统一拦截导出，全局显示 loading 加载

发布时间 2023-03-24 10:50:15作者: 柠檬-不加糖

PS=> 整体逻辑： request 请求文件单独引入 element-ui 的 loading 组件，通过 request 和 response 拦截器进行针对性拦截即可

 

先插入 element-ui 的 loading 插件 

import {  Loading } from "element-ui";

 特别注释：request 文件需要单独引入，不能通过 main.js 全局加载引入，会抛出异常找不到这个 element-ui 的组件

然后，需要全局写一个变量。例如：

let/var loadingInstance;

 

特别注释：这里不能用 const 常量，因为用了  const 常量就得赋值。建议用 let/var

 

 

 

之后需要分别在request拦截器 和 response拦截器 加入 loading ，即可实现全局 loading 加载

PS：发送之后加入loading

// request拦截器
service.interceptors.request.use(
  (config) => {
    
    if (config.responseType === "blob") { //这里的条件可以自行更改成自己需要的条件
      console.log("显示loading");

      loadingInstance = Loading.service({
        lock: true, //lock的修改符--默认是false
        text: "拼命加载中...", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.7)", //遮罩层颜色
      });
    }

    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

PS：返回之前关闭loading

// 响应拦截器
service.interceptors.response.use(
  (res) => {

    if (res.request.responseType == "blob") { //这里可以自行更改成需要自己的条件
      loadingInstance.close();

      return res.data;
    }

  },
  (error) => {
    return Promise.reject(error);
  }
);