ht_hooks/lib/useRequest/src/plugins/useRefreshOnWindowFocusPlugin.js

ht React 业务 Hooks

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = require("react");
var _useUnmount = _interopRequireDefault(require("../../../useUnmount"));
var _limit = _interopRequireDefault(require("../utils/limit"));
var _subscribeFocus = _interopRequireDefault(require("../utils/subscribeFocus"));
//!在页面重新聚焦（用户切回页面）时，自动重新请求（refresh），可以设置最小时间间隔，避免切换太频繁导致重复请求。

var useRefreshOnWindowFocusPlugin = function useRefreshOnWindowFocusPlugin(fetchInstance, _a) {
  var refreshOnWindowFocus = _a.refreshOnWindowFocus,
    _b = _a.focusTimespan,
    focusTimespan = _b === void 0 ? 5000 : _b;
  var unsubscribeRef = (0, _react.useRef)();
  var stopSubscribe = function stopSubscribe() {
    var _a;
    (_a = unsubscribeRef.current) === null || _a === void 0 ? void 0 : _a.call(unsubscribeRef);
  };
  (0, _react.useEffect)(function () {
    if (refreshOnWindowFocus) {
      //当配置了 refreshOnWindowFocus: true 时，才启用页面聚焦自动刷新功能。
      var limitRefresh_1 = (0, _limit["default"])(fetchInstance.refresh.bind(fetchInstance), focusTimespan); //#用 limit() 包裹 refresh()，控制在 focusTimespan 时间内只允许刷新一次，防止频繁切换窗口疯狂触发。
      unsubscribeRef.current = (0, _subscribeFocus["default"])(function () {
        limitRefresh_1(); //!订阅窗口聚焦事件，每次聚焦就调用 limitRefresh()即refresh重新请求
      });
    }
    return function () {
      stopSubscribe();
    };
  }, [refreshOnWindowFocus, focusTimespan]);
  (0, _useUnmount["default"])(function () {
    stopSubscribe();
  });
  return {};
};
var _default = exports["default"] = useRefreshOnWindowFocusPlugin;