React Native中JWTToken函数调用卡顿致应用无响应求助

1. 紧急修复：让加载器立即显示 #

问题根源是同步的JWTToken调用阻塞了React Native的UI线程，导致setLoader(true)的状态更新无法立即生效。把token生成逻辑放到异步队列中，让UI线程优先处理加载器渲染：

const getUser = async () => {
  setLoader(true); // 立即触发加载器显示

  // 将同步token生成放入异步任务，避免阻塞UI
  const token = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(JWTToken(''));
    }, 0);
  });

  try {
    // 建议把axios引入放到文件顶部，避免重复require
    const data = JSON.stringify({
      username: userName.toLocaleLowerCase(),
      password: password,
    });

    const response = await axios({
      method: 'post',
      url: `${BASE_URL}${GET_USER}`,
      headers: {
        'x-jwt-token': token,
        'Content-Type': 'application/json',
      },
      data: data,
    });

    // 处理接口返回数据
    console.log('用户数据:', response.data);
  } catch (error) {
    // 处理请求错误
    console.error('获取用户失败:', error);
  } finally {
    setLoader(false); // 无论成功失败，关闭加载器
  }
};

2. 根本优化：减少重复耗时操作 #

（1）缓存token，避免重复生成 #

如果token有有效期，生成一次后缓存起来，直到过期再重新生成，彻底减少耗时操作次数：

// 在组件外部或全局状态中缓存token和过期时间
let cachedToken = null;
let tokenExpiry = 0;

const getOrGenerateToken = async () => {
  const now = Date.now();
  // 假设token有效期为1小时，按需调整
  if (cachedToken && now < tokenExpiry) {
    return cachedToken;
  }

  // 重新生成token
  const token = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(JWTToken(''));
    }, 0);
  });

  cachedToken = token;
  tokenExpiry = now + 3600 * 1000; // 更新过期时间
  return token;
};

// 调用缓存方法获取token
const getUser = async () => {
  setLoader(true);
  try {
    const token = await getOrGenerateToken();
    // 后续请求逻辑不变
  } catch (error) {
    // 错误处理
  } finally {
    setLoader(false);
  }
};

（2）替换为异步加密库 #

node-forge的同步加密在React Native中容易卡UI，建议换成原生支持异步操作的JWT库，比如jose：

安装依赖：

npm install jose

异步生成JWT示例（根据你的签名逻辑调整）：

import { SignJWT } from 'jose';

const generateJWT = async () => {
  // 替换为你的实际密钥
  const secret = new TextEncoder().encode('your-signing-secret');
  const token = await new SignJWT({ /* 你的JWT Payload */ })
    .setProtectedHeader({ alg: 'HS256' })
    .setIssuedAt()
    .setExpirationTime('1h')
    .sign(secret);
  return token;
};

// 在getUser中直接调用异步方法
const getUser = async () => {
  setLoader(true);
  try {
    const token = await generateJWT();
    // 请求逻辑
  } catch (error) {
    // 错误处理
  } finally {
    setLoader(false);
  }
};

3. 额外优化建议 #

• 把axios的require/import放到文件顶部，避免每次函数调用都重复加载模块。
• 将API请求逻辑封装成单独的工具模块，方便统一处理token、错误拦截等逻辑。

内容的提问来源于stack exchange，提问作者deepanshi gupta