React Native中从Promise获取数据及Token提取函数实现问题

嘿，我来帮你把这个getTokenInfo函数给写对～ 你之前的代码里混用了await和.then，其实没必要，用async/await就能把异步逻辑写得更清晰，还能妥善处理Token的读取和信息提取。

首先，我们要明确两个核心需求：从AsyncStorage中取出Token，然后提取Token里的业务信息（比如JWT的用户ID、过期时间这类）。下面是完整的实现方案：

1. 基础版：读取Token并处理空值 #

先写最基础的函数，确保能安全读取Token，同时处理未登录（Token不存在）的情况：

// 记得先导入AsyncStorage（注意：RN 0.60+要用@react-native-async-storage/async-storage）
import AsyncStorage from '@react-native-async-storage/async-storage';

export const getTokenInfo = async () => {
  try {
    // 用await直接获取值，不用嵌套.then，代码更整洁
    const token = await AsyncStorage.getItem('USER_TOKEN');
    
    if (!token) {
      // 没有Token的场景，这里可以返回null或者抛出错误，看你的业务需求
      console.log('用户未登录，无可用Token');
      return null;
    }

    // 如果暂时只需要原Token，直接返回即可
    return token;
  } catch (error) {
    // 捕获读取存储时的异常（比如存储损坏、权限问题）
    console.error('读取Token失败:', error);
    throw error; // 抛出错误让调用方处理，或者返回错误对象
  }
};

2. 进阶版：解析JWT格式的Token信息 #

如果你的Token是JWT（最常见的后端返回格式），要提取里面的用户信息、过期时间等，推荐用jwt-decode库来解析（手动解析容易踩坑，比如base64编码处理、过期时间转换）：

第一步：安装依赖 #

# npm
npm install jwt-decode

# yarn
yarn add jwt-decode

第二步：完善getTokenInfo函数 #

import AsyncStorage from '@react-native-async-storage/async-storage';
import jwtDecode from 'jwt-decode';

export const getTokenInfo = async () => {
  try {
    const token = await AsyncStorage.getItem('USER_TOKEN');
    
    if (!token) {
      console.log('用户未登录');
      return null;
    }

    // 解码JWT，得到里面的payload信息
    const decodedToken = jwtDecode(token);
    
    // 可以返回原Token+解析后的信息，方便后续发请求和用业务数据
    return {
      rawToken: token,
      userId: decodedToken.userId, // 假设你的JWT里有userId字段
      expiresAt: decodedToken.exp, // JWT的过期时间（时间戳）
      ...decodedToken // 把所有解析字段都返回
    };
  } catch (error) {
    console.error('获取Token信息失败:', error);
    // 如果是JWT格式无效的错误，可以单独处理
    if (error.name === 'InvalidTokenError') {
      console.log('Token格式无效，可能已篡改');
      // 可以在这里清除无效Token，跳转到登录页
      await AsyncStorage.removeItem('USER_TOKEN');
    }
    throw error;
  }
};

3. 如何在项目中使用这个函数 #

比如在组件里调用，发请求时携带Token：

const fetchUserData = async () => {
  try {
    const tokenData = await getTokenInfo();
    if (!tokenData) {
      // 跳转到登录页
      navigation.navigate('Login');
      return;
    }

    // 带着Token发请求
    const response = await fetch('https://你的后端API地址/user', {
      headers: {
        Authorization: `Bearer ${tokenData.rawToken}`
      }
    });
    
    const userData = await response.json();
    console.log('用户数据:', userData);
  } catch (err) {
    console.error('请求失败:', err);
  }
};

// 在useEffect或者按钮点击事件里调用
useEffect(() => {
  fetchUserData();
}, []);

• 别在组件的render函数里直接调用异步函数，要放在useEffect、事件处理函数（比如按钮点击）里。
• 可以在解析Token后检查expiresAt字段，判断Token是否过期，提前触发刷新Token的逻辑。
• 确保你用的是最新版的@react-native-async-storage/async-storage，旧的内置AsyncStorage已经被废弃了。

内容的提问来源于stack exchange，提问作者Xa Na