function useRequest<TData, TParams extends any[]>(
  service: Service<TData, TParams>,
  options?: Options<TData, TParams>,
  plugins?: Plugin<TData, TParams>[],
) {
  return useRequestImplement<TData, TParams>(service, options, [
    // 插件列表，用來拓展功能，一般用戶不使用。文檔中沒有看到暴露 API
    ...(plugins || []),
    useDebouncePlugin,
    useLoadingDelayPlugin,
    usePollingPlugin,
    useRefreshOnWindowFocusPlugin,
    useThrottlePlugin,
    useAutoRunPlugin,
    useCachePlugin,
    useRetryPlugin,
  ] as Plugin<TData, TParams>[]);
}
export default useRequest;

const update = useUpdate();
// 保證請求實(shí)例都不會發(fā)生改變
const fetchInstance = useCreation(() => {
  // 目前只有 useAutoRunPlugin 這個(gè) plugin 有這個(gè)方法
  // 初始化狀態(tài)，返回 { loading: xxx }，代表是否 loading
  const initState = plugins.map((p) => p?.onInit?.(fetchOptions)).filter(Boolean);
  // 返回請求實(shí)例
  return new Fetch<TData, TParams>(
    serviceRef,
    fetchOptions,
    // 可以 useRequestImplement 組件
    update,
    Object.assign({}, ...initState),
  );
}, []);
fetchInstance.options = fetchOptions;
// run all plugins hooks
// 執(zhí)行所有的 plugin，拓展能力，每個(gè) plugin 中都返回的方法，可以在特定時(shí)機(jī)執(zhí)行
fetchInstance.pluginImpls = plugins.map((p) => p(fetchInstance, fetchOptions));

export default class Fetch<TData, TParams extends any[]> {
  // 插件執(zhí)行后返回的方法列表
  pluginImpls: PluginReturn<TData, TParams>[];
  count: number = 0;
  // 幾個(gè)重要的返回值
  state: FetchState<TData, TParams> = {
    loading: false,
    params: undefined,
    data: undefined,
    error: undefined,
  };
  constructor(
    // React.MutableRefObject —— useRef創(chuàng)建的類型，可以修改
    public serviceRef: MutableRefObject<Service<TData, TParams>>,
    public options: Options<TData, TParams>,
    // 訂閱-更新函數(shù)
    public subscribe: Subscribe,
    // 初始值
    public initState: Partial<FetchState<TData, TParams>> = {},
  ) {
    this.state = {
      ...this.state,
      loading: !options.manual, // 非手動，就loading
      ...initState,
    };
  }
  // 更新狀態(tài)
  setState(s: Partial<FetchState<TData, TParams>> = {}) {
    this.state = {
      ...this.state,
      ...s,
    };
    this.subscribe();
  }
  // 執(zhí)行插件中的某個(gè)事件（event），rest 為參數(shù)傳入
  runPluginHandler(event: keyof PluginReturn<TData, TParams>, ...rest: any[]) {
    // 省略代碼...
  }
  // 如果設(shè)置了 options.manual = true，則 useRequest 不會默認(rèn)執(zhí)行，需要通過 run 或者 runAsync 來觸發(fā)執(zhí)行。
  // runAsync 是一個(gè)返回 Promise 的異步函數(shù)，如果使用 runAsync 來調(diào)用，則意味著你需要自己捕獲異常。
  async runAsync(...params: TParams): Promise<TData> {
    // 省略代碼...
  }
  // run 是一個(gè)普通的同步函數(shù)，其內(nèi)部也是調(diào)用了 runAsync 方法
  run(...params: TParams) {
    // 省略代碼...
  }
  // 取消當(dāng)前正在進(jìn)行的請求
  cancel() {
    // 省略代碼...
  }
  // 使用上一次的 params，重新調(diào)用 run
  refresh() {
    // 省略代碼...
  }
  // 使用上一次的 params，重新調(diào)用 runAsync
  refreshAsync() {
    // 省略代碼...
  }
  // 修改 data。參數(shù)可以為函數(shù)，也可以是一個(gè)值
  mutate(data?: TData | ((oldData?: TData) => TData | undefined)) {
    // 省略代碼...
}

// 幾個(gè)重要的返回值
state: FetchState<TData, TParams> = {
  loading: false,
  params: undefined,
  data: undefined,
  error: undefined,
};
// 更新狀態(tài)
setState(s: Partial<FetchState<TData, TParams>> = {}) {
  this.state = {
    ...this.state,
    ...s,
  };
  this.subscribe();
}

export interface PluginReturn<TData, TParams extends any[]> {
  onBefore?: (params: TParams) =>
    | ({
        stopNow?: boolean;
        returnNow?: boolean;
      } & Partial<FetchState<TData, TParams>>)
    | void;
  onRequest?: (
    service: Service<TData, TParams>,
    params: TParams,
  ) => {
    servicePromise?: Promise<TData>;
  };
  onSuccess?: (data: TData, params: TParams) => void;
  onError?: (e: Error, params: TParams) => void;
  onFinally?: (params: TParams, data?: TData, e?: Error) => void;
  onCancel?: () => void;
  onMutate?: (data: TData) => void;
}

// 執(zhí)行插件中的某個(gè)事件（event），rest 為參數(shù)傳入
runPluginHandler(event: keyof PluginReturn<TData, TParams>, ...rest: any[]) {
  // @ts-ignore
  const r = this.pluginImpls.map((i) => i[event]?.(...rest)).filter(Boolean);
  return Object.assign({}, ...r);
}

this.count += 1;
// 主要為了 cancel 請求
const currentCount = this.count;
const {
  stopNow = false,
  returnNow = false,
  ...state
  // 先執(zhí)行每個(gè)插件的前置函數(shù)
} = this.runPluginHandler('onBefore', params);
// stop request
if (stopNow) {
  return new Promise(() => {});
}
this.setState({
  // 開始 loading
  loading: true,
  // 請求參數(shù)
  params,
  ...state,
});
// return now
// 立即返回，跟緩存策略有關(guān)
if (returnNow) {
  return Promise.resolve(state.data);
}
// onBefore - 請求之前觸發(fā)
// 假如有緩存數(shù)據(jù)，則直接返回
this.options.onBefore?.(params);

// replace service
// 如果有 cache 的實(shí)例，則使用緩存的實(shí)例
let { servicePromise } = this.runPluginHandler('onRequest', this.serviceRef.current, params);
if (!servicePromise) {
  servicePromise = this.serviceRef.current(...params);
}
const res = await servicePromise;

// 請求階段
onRequest: (service, args) => {
  // 看 promise 有沒有緩存
  let servicePromise = cachePromise.getCachePromise(cacheKey);
  // If has servicePromise, and is not trigger by self, then use it
  // 如果有servicePromise，并且不是自己觸發(fā)的，那么就使用它
  if (servicePromise && servicePromise !== currentPromiseRef.current) {
    return { servicePromise };
  }
  servicePromise = service(...args);
  currentPromiseRef.current = servicePromise;
  // 設(shè)置 promise 緩存
  cachePromise.setCachePromise(cacheKey, servicePromise);
  return { servicePromise };
},

this.count += 1;
// 主要為了 cancel 請求
const currentCount = this.count;

// 取消當(dāng)前正在進(jìn)行的請求
cancel() {
  // 設(shè)置 + 1，在執(zhí)行 runAsync 的時(shí)候，就會發(fā)現(xiàn) currentCount !== this.count，從而達(dá)到取消請求的目的
  this.count += 1;
  this.setState({
    loading: false,
  });
  // 執(zhí)行 plugin 中所有的 onCancel 方法
  this.runPluginHandler('onCancel');
}

// 假如不是同一個(gè)請求，則返回空的 promise
if (currentCount !== this.count) {
  // prevent run.then when request is canceled
  return new Promise(() => {});
}

try {
  const res = await servicePromise;
  // 省略代碼...
  this.options.onSuccess?.(res, params);
  // plugin 中 onSuccess 事件
  this.runPluginHandler('onSuccess', res, params);
  // service 執(zhí)行完成時(shí)觸發(fā)
  this.options.onFinally?.(params, res, undefined);
  if (currentCount === this.count) {
    // plugin 中 onFinally 事件
    this.runPluginHandler('onFinally', params, res, undefined);
  }
  return res;
  // 捕獲報(bào)錯(cuò)
} catch (error) {
  // 省略代碼...
  // service reject 時(shí)觸發(fā)
  this.options.onError?.(error, params);
  // 執(zhí)行 plugin 中的 onError 事件
  this.runPluginHandler('onError', error, params);
  // service 執(zhí)行完成時(shí)觸發(fā)
  this.options.onFinally?.(params, undefined, error);
  if (currentCount === this.count) {
    // plugin 中 onFinally 事件
    this.runPluginHandler('onFinally', params, undefined, error);
  }
  // 拋出錯(cuò)誤。
  // 讓外部捕獲感知錯(cuò)誤
  throw error;
}