JS實用技巧實現loading載入範例詳解

2023-03-27 06:01:11

防抖節流自定義指令

一、問題現象

作業系統流程時，網速過慢，點選【按鈕】，頁面沒有及時反應；使用者感知不到，再次點選按鈕，系統流程報錯。

二、想法

控制按鈕操作時的頻繁介面呼叫，通過防抖操作進行處理

三、實現

第一步：封裝自定義指令v-debounce

import Vue from 'vue';
//按鈕防抖動指令
Vue.directive('debounce', {
    inserted(el, binding) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true;
                setTimeout(() => {
                    el.disabled = false;
                }, binding.value || 3 * 1000); // 三秒之內點選不會觸發介面呼叫
            }
        });
    },
});

第二步：在main.js檔案中引入檔案

import '@/utils/directives.js';

第三步：專案的template中使用

<el-button type="primary" class="change-btns" @click="sendCode()" v-debounce>傳送驗證碼</el-button>

loading載入

考慮到專案本身可能已經進入尾聲，再應用自定義指令的話，需要耗費時間，逐一排查按鈕操作，費時費力。

一、想法

想要減少時間，肯定需要統一設定處理，考慮到控制介面的頻繁呼叫和操作頻繁等問題，或許通過頁面整體不可點選的方式進行處理，那就是介面呼叫時控制頁面載入。

二、實現

首先寫一個loading.vue元件

<!--
 * @Author: Winter_Bear
 * @Date: 2023-03-25 16:18:16
 * @LastEditors: zh
 * @LastEditTime: 2023-03-25 16:55:18
 * @Description: loading元件
-->
<template>
  <div v-if="visable" class="loaidng">
    <transition name="animation">
      <div class="load">
        <img alt="" class="img" src="@/assets/image/loading.png" />
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visable: false,
    };
  },
};
</script>
<style scoped>
.loaidng {
  width: 100% !important;
  height: 100% !important;
  display: -webkit-flex !important; /* 新版本語法: Chrome 21+ */
  display: -webkit-box !important; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box !important; /* 老版本語法: Firefox (buggy) */
  display: -ms-flexbox !important; /* 混合版本語法: IE 10 */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background: rgba(0, 0, 0, 0);
  color: #282828;
  font-size: 20px;
  z-index: 999999;
}
.load {
  background-clip: text;
  -webkit-position: relative !important;
  position: relative !important;
}
.img {
  width: 75px;
  animation: rotation 5s linear infinite;
  animation: rotation 2s linear infinite;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.no-scroll {
  height: 100vh;
}
.no-scroll > * {
  position: sticky;
  top: 0;
}
@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
</style>

封裝loading.js檔案

import Loading from './index.vue';
//先建立一個空範例
let instance = null;
let winX = null;
let winY = null;
window.addEventListener('scroll', function () {
  if (winX !== null && winY !== null) {
    window.scrollTo(winX, winY);
  }
});
function disableWindowScroll() {
  winX = window.scrollX;
  winY = window.scrollY;
}
function enableWindowScroll() {
  winX = null;
  winY = null;
}
export default {
  install(Vue) {
    if (!instance) {
      //構造器 /子類
      let MyLoading = Vue.extend(Loading);
      instance = new MyLoading({
        //建立一個div,並掛載上去
        el: document.createElement('div'),
      });
      document.body.appendChild(instance.$el);
    }
    //自定義一些方法,操作loading的顯示與隱藏關
    let customMethods = {
      async start() {
        console.log(instance);
        instance.visable = true;
        disableWindowScroll();
        var mo = function (e) {
          passive: false;
        };
      },
      finish() {
        instance.visable = false;
        enableWindowScroll();
        var mo = function (e) {
          passive: false;
        };
      },
    };
    //掛載到自定義方法vue範例上
    if (!Vue.$loading) {
      Vue.$loading = customMethods;
      //掛載到原型上
      Vue.prototype.$loading = Vue.$loading;
    } else {
      console.log('$loading方法已被佔用');
    }
  },
};

3.在main.js中掛載到全域性Vue的原型上

import $loading from '@/components/loading/loading.js';
Vue.use($loading);

在request.js介面請求和響應攔截時做處理

import Vue from 'vue';
import axios from 'axios';
import store from '@/store';
import router from '@/router';
import messageup from './resetMessage.js';
import commonService from '@/api/common.js';
import storage from '@/utils/storage';
import { setToken, setRefreshToken } from '@/utils/auth.js';
const service = axios.create({
  baseURL: process.env.VUE_APP_appBaseUrl,
  // 跨域請求時是否需要使用憑證
  withCredentials: false,
  // 請求 1000s 超時
  timeout: 1000 * 60 * 60,
});
let loadingSum = 0;
let isRefreshing = false; // 標記是否正在重新整理 token， 防止多次重新整理token
let requests = []; // 儲存待重發請求的陣列(同時發起多個請求的處理)
// 請求攔截器
service.interceptors.request.use(
  (config) => {
    loadingSum++;
    if (loadingSum == 1) {
      Vue.$loading.start();
    }
    let EnterpriseToken = '';
    storage.get('CLIENTID', (data) => {
      EnterpriseToken = data;
    });
    if (EnterpriseToken) {
      config.headers.EnterpriseToken = EnterpriseToken;
    }
    return config;
  },
  (error) => {
    messageup({
      message: '服務異常！',
      type: 'error',
      showClose: true,
      duration: 0,
    });
    return Promise.resolve(error);
  },
);
// 響應攔截器
service.interceptors.response.use(
  (response) => {
    let config = response.config;
    let url = response.config.url;
    const code = response.data.code;
    loadingSum--;
    if (loadingSum == 0) {
      Vue.$loading.finish();
    }
    if (['701', '702'].includes(code)) {
      storage.removeAll();
      router.replace('/sign').catch((err) => err);
      messageup({
        message: response.data.message,
        type: 'error',
      });
      return;
    } else if (code == '801') {
      //這部分屬於強制登入的邏輯狀態處理
      if (!isRefreshing) {
        loadingSum++;
        if (loadingSum == 1) {
          Vue.$loading.start();
        }
        isRefreshing = true;
        let getRefreshToken = '';
        storage.get('REFCLIENTID', (data) => {
          getRefreshToken = data;
        });
        if (getRefreshToken) {
          return new Promise((resolve, reject) => {
            let data = {
              refreshToken: getRefreshToken,
            };
            commonService
              .refreshToken(data)
              .then((res) => {
                if (res && res.data && res.data.code == '200') {
                  const { clientid, refreshid } = res.data.data;
                  setToken(clientid);
                  setRefreshToken(refreshid);
                  config.headers.EnterpriseToken = clientid;
                  // token 重新整理後將陣列的方法重新執行
                  requests.forEach((cb) => cb(clientid));
                  requests = []; // 重新請求完清空
                  resolve(service(config));
                } else {
                  requests = [];
                  storage.removeAll();
                  router.replace('/sign').catch((err) => err);
                }
              })
              .catch((err) => {
                return Promise.reject(err);
              })
              .finally(() => {
                isRefreshing = false;
                loadingSum--;
                if (loadingSum == 0) {
                  Vue.$loading.finish();
                }
              });
          });
        } else {
          loadingSum--;
          if (loadingSum == 0) {
            Vue.$loading.finish();
          }
        }
      } else {
        // 返回未執行 resolve 的 Promise
        return new Promise((resolve) => {
          // 用函數形式將 resolve 存入，等待重新整理後再執行
          requests.push((token) => {
            config.headers.EnterpriseToken = token;
            resolve(service(config));
          });
        });
      }
    } else {
      return response;
    }
  },
  (error) => {
    loadingSum--;
    if (loadingSum == 0) {
      Vue.$loading.finish();
    }
    messageup({
      message: error.message,
      type: 'error',
      showClose: true,
      duration: 0,
    });
    return Promise.reject(error);
  },
);
export default {
  post(url, data = {}, headers = {}) {
    return new Promise((resolve, reject) => {
      service.post(url, data, headers).then(
        (response) => {
          resolve(response);
        },
        (err) => {
          reject(err);
        },
      );
    });
  },
  get(url, params = {}, headers = {}) {
    return new Promise((resolve, reject) => {
      service
        .get(url, {
          params: params,
          headers: headers,
        })
        .then((response) => {
          resolve(response);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  when(arry = []) {
    if (arry.length <= 1) {
      return arry[0];
    } else {
      let arr = [];
      let length = arry.length;
      for (let i = 0; i < length; i++) {
        arr.push('res' + i);
      }
      return new Promise((resolve, reject) => {
        axios.all(arry).then(
          axios.spread((...arr) => {
            resolve(arr);
          }),
        );
      });
    }
  },
};