ht_hooks
Version:
ht React 业务 Hooks
43 lines • 1.58 kB
JavaScript
//!请求开始时不立刻 loading = true。（外部设置的loading = true是显示loading...字样）
//!先等待 loadingDelay 毫秒，如果请求还没结束，再设置 loading = true。
//!防止请求很快但还要显示loading大破之看起来一闪而过的情况
import { useRef } from 'react';
var useLoadingDelayPlugin = function (fetchInstance, _a) {
var loadingDelay = _a.loadingDelay,
ready = _a.ready;
var timerRef = useRef(); // 用 useRef 定义一个定时器引用，防止重新渲染时丢失定时器
if (!loadingDelay) {
// #如果没设置 loadingDelay，说明不需要延迟 loading，直接退出插件（返回空对象，啥生命周期钩子都不注入）
return {};
}
var cancelTimeout = function () {
if (timerRef.current) {
clearTimeout(timerRef.current);
}
};
return {
onBefore: function () {
cancelTimeout(); //先取消上一个定时器，避免上次未清除的残留定时器影响
// Two cases:
// 1. ready === undefined
// 2. ready === true
if (ready !== false) {
timerRef.current = setTimeout(function () {
fetchInstance.setState({
loading: true
});
}, loadingDelay);
}
return {
loading: false //在请求刚开始时，先确保 loading: false，等延迟后再设置 true（如果请求还没结束的话）
};
},
onFinally: function () {
cancelTimeout();
},
onCancel: function () {
cancelTimeout();
}
};
};
export default useLoadingDelayPlugin;