＜ axios封装篇 ：一文看懂Axios + ElementUi 配置全局遮罩loading ＞

---

今天这篇文章，主要是用于补充上次的 axios封装相关文章，用于补充全局配置接口遮罩！

下面我们开始今天的内容吧 ！ ！！

👉 实现原理

通过配置 Axios封装 的拦截器，在请求前去匹配 loading 配置文件中，判断是否需要进行全局遮罩。引入 elementUi 组件库中，loading函数式使用遮罩。

👉 Axios封装

// 引入elementUi 及 loading 配置文件
import ElementUI from "element-ui";
import loadingOption from './loadingOption.js'

> loading配置文件

// 配置需要在请求时，启用全局loading的接口路径, 不配置默认不开启，避免重复loading
import { API_PATH } from "@/config";

// 以下代表需要遮罩的接口地址
const loadingOption = {
  [API_PATH + '/rule/update']: true,
  [API_PATH + '/rule/add']: true,
  [API_PATH + '/knowledge/add']: true,
  ...
};

export default loadingOption;

> axios封装文件

const http = ['get', 'head', 'delete'].includes(type)
   ? axios[type](url, {...config, params: data})
    : axios[type](url, data, config)
    
let loading = ''
// 匹配需要遮罩的接口
loadingOption[url] && (() => {
  loading = ElementUI.Loading.service({
    lock: true,
    text: '拼命加载中...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
})()
http.then(function (res) {
	...
    if (socket) return
    processData(res, cache, storage, resolve, reject)
}).catch(function (res) {
	...
    reject(res)
}).finally(() => {
  loadingOption[url] && (() => {
    loading.close();
  })()
})

往期内容 💨

🔥 ＜ elementUI组件样式及功能补全： 实现点击steps组件跳转对应步骤 ＞

🔥 ＜ CSDN周赛解析：第 28 期 ＞

🔥 ＜ elementUi 组件插件： el-table表格拖拽修改列宽及行高 及 使用注意事项 ＞

🔥 ＜ 每日小技巧：N个很棒的 Vue 开发技巧, 持续记录ing ＞