React Hook中异步状态的优雅管理：使用useQuery解决令牌延迟问题

import { useState, useEffect, useCallback } from 'react';
import { useSession } from 'next-auth/react'; // 假设使用next-auth

// 假设有一个logger函数用于调试
const logger = (message: string) => console.log(message);

export function useToken2() {
  const { data: session, status } = useSession();
  const [token, setToken] = useState<string | null>(null);

  useEffect(() => {
    if (status === 'authenticated' && session?.accessToken) {
      logger('useEffect setToken');
      setToken(session.accessToken);
    }
  }, [status, session]); // 依赖项确保当status或session变化时重新运行

  const tokenFn = useCallback(async (): Promise<string> => {
    return new Promise<string>((resolve) => {
      if (token != null) { // 检查当前token
        resolve(token);
      } else {
        // 如果token为空，则启动轮询
        const tokenInterval = setInterval(() => {
          if (token != null) { // 轮询检查token是否已设置
            clearInterval(tokenInterval);
            resolve(token);
          }
        }, 100);
        // 设置一个超时，防止无限等待
        setTimeout(() => {
          clearInterval(tokenInterval);
          logger('tokenFn timeout');
          resolve('');
        }, 5000);
      }
    });
  }, [token]); // tokenFn依赖于token状态

  return {
    tokenFn,
  };
}

import React, { FC, useEffect, useState } from 'react';
import { useToken2 } from './useToken2'; // 假设useToken2在同级目录

const Test: FC = () => {
  const [token, setToken] = useState('');
  const { tokenFn } = useToken2();

  useEffect(() => {
    tokenFn().then((res) => {
      setToken(res);
    });
  }, [tokenFn]); // 依赖项tokenFn

  return (
    <>
      <div>当前令牌: {token}</div>
    </>
  );
};

import { useSession } from 'next-auth/react';
import { useQuery } from 'react-query'; // 引入useQuery

export function useToken2() {
  const { data: session, status } = useSession();

  // 使用useQuery来获取token
  const { data: token } = useQuery<string>(
    ["token"], // queryKey: 唯一的查询标识符
    async () => {
      // queryFn: 实际获取token的异步函数
      // 如果session.accessToken存在，则返回它，否则返回空字符串
      return session?.accessToken ?? "";
    },
    {
      // enabled: 关键选项，控制查询是否执行
      // 只有当session.accessToken存在且status为'authenticated'时，查询才会被启用
      enabled: !!session?.accessToken && status === "authenticated",
      // 其他选项，如staleTime, cacheTime, retry等，可根据需求配置
      staleTime: Infinity, // 令牌通常不会过期，或者由后端刷新
      cacheTime: Infinity, // 长期缓存
    }
  );

  return {
    token, // 直接返回由useQuery管理和提供的token
  };
}

import React, { FC } from 'react';
import { useToken2 } from './useToken2';

const Test: FC = () => {
  const { token } = useToken2(); // 直接解构获取token

  return (
    <>
      <div>当前令牌: {token || '正在加载或未认证...'}</div>
    </>
  );
};