✎ 每日一語
孤單一人的時間使自己變得優秀，給來的人一個驚喜，也給自己一個好的交代。
前言 在我們的平時的工作中，在前後端互動的時候，為了提高頁面的觀賞性和使用者的體驗，我們會在頁面上添加loading來阻止使用者操作來等待接口的傳回，這個時候我們會考慮到全局loading還是局部loading，下面小編總結了一下，在開發中自己用到的方法，一起共享。
今天的工作任務是什麼？
boss，完成全局loading加載的封裝
01用到的插件
1、element-ui-->ui庫
2、lodash--->高效的JavaScript庫
3、axios--->基于promise的http庫
準備工作安裝：
$ npm i element-ui -S$ npm i lodash -S$ npm i axios -S
02 開啟loading
首先我們需要引入element-ui的Loading元件，這個元件有兩種調用方式：
1、通過指v-loading
2、通過服務Loading.service();
樣式見下圖：
api:https://element.eleme.cn/#/zh-CN/component/loading
import { Loading } from "element-ui";import _ from 'lodash';let loading = null; //設定全局變量loadinglet needRequestCount = 0; //設定全局的請求總數 //開啟loading狀态const startLoading = (headers={}) => { loading = Loading.service({ lock: true, //是否鎖定螢幕的滾動 text: headers.text||"加載中……", //loading下面的文字 background: "rgba(0, 0, 0, 0.7)", //loading的背景色 target:headers.target||"body" //loading顯示在容器 });};
03 關閉loading 在關閉loading的時候小編為了防止loading的閃動，這裡采用了防抖的方法，防抖的計時一般采用300-600ms之前為最佳，在關閉loading的之後，我們要注意全局變量導緻的V8垃圾回收機制，把沒用的變量清空為null
//關閉loading狀态const endLoading = _.debounce(() => { loading.close(); loading = null;},300);
04 對多次請求loading的開啟
在這裡，小編在方法中設定了headers的參數,這個參數的用途在于，在我們請求的時候我們不用的接口和方法可能用到的樣式和文字不同，這個時候我們可以通過這個參數來傳遞
export const showScreenLoading=(headers)=>{ if(needRequestCount == 0&&!loading){ startLoading(headers); } needRequestCount++;}
05 對多次請求loading的關閉 在關閉的方法中，小編使用了一個Math.max()取最大值的方法，是為了保險取到的needRequestCount是0
export const hideScreenLoading=()=>{ if(needRequestCount<=0) return needRequestCount--; needRequestCount = Math.max(needRequestCount, 0); if(needRequestCount===0){ endLoading() }}
06 在請求中設定loading 在這裡，我們使用的是axios的請求攔截器，如果不懂axios請求攔截器的童鞋可以看小編上一篇文章 談談Vue開發過程中用到的插件 我們可以在headers的參數裡設定showLoading屬性來靈活的設定loading的顯示和隐藏
//請求攔截器instance.interceptors.request.use( config => { config.headers.Authorization = Lockr.get("token"); if (config.headers.showLoading !== false) { showScreenLoading(config.headers); } return config; },error => { if (config.headers.showLoading !== false) { hideScreenLoading(config.headers); } Message.error("請求逾時!"); return Promise.reject(error); });
07 在響應中設定loading 在這裡，小編用了一個setTimeout定時器是為了模拟請求異步傳回，檢視loading的狀态，在開發中我們可以去掉
//響應攔截器 instance.interceptors.response.use( response => { if (response.status == 200) { setTimeout(() => { if (response.config.headers.showLoading !== false) { hideScreenLoading(); } }, 500); return response.data; } }, error => { if (response.config.headers.showLoading !== false) { hideScreenLoading(); } return Promise.reject(error); } ); return instance(config); }
此處應該有掌聲
08 完整的代碼
Q
我可以直接用嗎？
小醜
開箱即用，直接帶走，就問你香不香
import axios from "axios";import Lockr from "lockr";import { showScreenLoading, hideScreenLoading } from "./loading";import { Message } from "element-ui";class Service { construct() { this.baseURL = process.env.VUE_APP_URL; this.timeout = 3000; //請求時間 } request(config) { let instance = axios.create({ baseURL: this.baseURL, timeout: this.timeout }); //請求攔截器 instance.interceptors.request.use( config => { config.headers.Authorization = Lockr.get("token"); if (config.headers.showLoading !== false) { showScreenLoading(config.headers); } return config; }, error => { if (config.headers.showLoading !== false) { hideScreenLoading(config.headers); } Message.error("請求逾時!"); return Promise.reject(error); } ); //響應攔截器 instance.interceptors.response.use( response => { if (response.status == 200) { setTimeout(() => { if (response.config.headers.showLoading !== false) { hideScreenLoading(); } }, 500); return response.data; } }, error => { if (response.config.headers.showLoading !== false) { hideScreenLoading(); } return Promise.reject(error); } ); return instance(config); }}export default new Service();
import { Loading } from "element-ui";import _ from 'lodash';let loading = null;let needRequestCount = 0;//開啟loading狀态const startLoading = (headers={}) => { loading = Loading.service({ lock: true, text: headers.text||"加載中……", background: "rgba(0, 0, 0, 0.7)", target:headers.target||"body" });};//關閉loading狀态const endLoading = _.debounce(() => { loading.close(); loading = null;},300);export const showScreenLoading=(headers)=>{ if(needRequestCount == 0&&!loading){ startLoading(headers); } needRequestCount++;}export const hideScreenLoading=()=>{ if(needRequestCount<=0) return needRequestCount--; needRequestCount = Math.max(needRequestCount, 0); if(needRequestCount===0){ endLoading() }}export default {};
- End -
喜歡就點個在看再走吧