ht_hooks/lib/useRequest/src/useRequestImplement.js

ht React 业务 Hooks

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _tslib = require("tslib");
var _useCreation = _interopRequireDefault(require("../../useCreation"));
var _useLatest = _interopRequireDefault(require("../../useLatest"));
var _useMemoizedFn = _interopRequireDefault(require("../../useMemoizedFn"));
var _useMount = _interopRequireDefault(require("../../useMount"));
var _useUnmount = _interopRequireDefault(require("../../useUnmount"));
var _useUpdate = _interopRequireDefault(require("../../useUpdate"));
var _isDev = _interopRequireDefault(require("../../utils/isDev"));
var _Fetch = _interopRequireDefault(require("./Fetch"));
function useRequestImplement(service,
//请求函数，传进来的
options,
//配置项，比如 manual、defaultParams、onSuccess 等
plugins) {
  if (options === void 0) {
    options = {};
  }
  if (plugins === void 0) {
    plugins = [];
  }
  var _a = options.manual,
    manual = _a === void 0 ? false : _a,
    rest = (0, _tslib.__rest)(options, ["manual"]); // 拆解 options。manual = false 表示默认“自动请求” 。其他选项继续存在 rest 里
  if (_isDev["default"]) {
    //开发环境校验 defaultParams 必须是数组
    if (options.defaultParams && !Array.isArray(options.defaultParams)) {
      console.warn("expected defaultParams is array, got ".concat((0, _typeof2["default"])(options.defaultParams)));
    }
  }
  var fetchOptions = (0, _tslib.__assign)({
    //合并最终的 fetch 配置
    manual: manual
  }, rest);
  var serviceRef = (0, _useLatest["default"])(service); //解决闭包陷阱问题，确保拿到最新的 service 函数引用
  var update = (0, _useUpdate["default"])(); //创建一个更新的动作。这是一个触发 React 组件强制刷新的函数，Fetch.setState() 就靠它
  //创建 fetchInstance 实例
  var fetchInstance = (0, _useCreation["default"])(function () {
    var initState = plugins.map(function (p) {
      var _a;
      return (_a = p === null || p === void 0 ? void 0 : p.onInit) === null || _a === void 0 ? void 0 : _a.call(p, fetchOptions);
    }).filter(Boolean);
    //#如果插件有OnInit的话，执行插件的OnInit(fetchOptions)。map会将所有插件OnInit的返回值收集为一个数组，用filter过滤掉 undefined 的，剩下存入initState。（initState是所有有OnInit的插件执行OnInit返回结果的数组）
    return new _Fetch["default"](
    //!Fetch 是核心类，负责具体的请求控制、状态管理等
    serviceRef, fetchOptions,
    //请求配置参数
    update, Object.assign.apply(
    //通知 React 更新组件的函数
    Object, (0, _tslib.__spreadArray)([{}], (0, _tslib.__read)(initState), false)));
  }, []); //无依赖项表示只在第一次渲染初始化，后续不会重复构建 fetchInstance
  fetchInstance.options = fetchOptions; //再赋值一次，保证 Fetch 内部的 options 最新
  // run all plugins hooks
  fetchInstance.pluginImpls = plugins.map(function (p) {
    return p(fetchInstance, fetchOptions);
  }); //!将所有插件的钩子都收集到fetch实例pluginImpls属性里
  //#遍历所有插件。
  //#执行插件的主函数，传入：
  //#fetchInstance（让插件能操作 Fetch，比如 fetchInstance.setState()）
  //#fetchOptions（让插件能读取配置信息）。
  //#每个插件会返回它的生命周期钩子合集（比如 onBefore、onSuccess）。
  //#收集这些钩子合集，存到 pluginImpls 里。
  (0, _useMount["default"])(function () {
    if (!manual) {
      // useCachePlugin can set fetchInstance.state.params from cache when init
      var params = fetchInstance.state.params || options.defaultParams || [];
      // @ts-ignore
      fetchInstance.run.apply(fetchInstance, (0, _tslib.__spreadArray)([], (0, _tslib.__read)(params), false));
    }
  });
  (0, _useUnmount["default"])(function () {
    fetchInstance.cancel();
  });
  return {
    loading: fetchInstance.state.loading,
    //请求状态
    data: fetchInstance.state.data,
    //请求返回数据
    error: fetchInstance.state.error,
    //请求错误信息
    params: fetchInstance.state.params || [],
    //请求参数
    cancel: (0, _useMemoizedFn["default"])(fetchInstance.cancel.bind(fetchInstance)),
    //取消请求
    refresh: (0, _useMemoizedFn["default"])(fetchInstance.refresh.bind(fetchInstance)),
    // 重新请求
    refreshAsync: (0, _useMemoizedFn["default"])(fetchInstance.refreshAsync.bind(fetchInstance)),
    //异步刷新
    run: (0, _useMemoizedFn["default"])(fetchInstance.run.bind(fetchInstance)),
    //手动运行请求
    runAsync: (0, _useMemoizedFn["default"])(fetchInstance.runAsync.bind(fetchInstance)),
    //异步运行请求
    mutate: (0, _useMemoizedFn["default"])(fetchInstance.mutate.bind(fetchInstance)) //手动修改数据
  };
}
var _default = exports["default"] = useRequestImplement;