React Native中AsyncStorage读取后未发起GitHub API请求的认证问题

嘿，这问题我之前也踩过坑！你大概率是没处理好AsyncStorage的异步特性导致的——毕竟它所有的读写操作都是异步的，不像同步代码那样按顺序执行。

为什么按钮触发没问题，componentDidMount就不行？ #

按钮点击是用户主动触发的事件，要么你在之前已经完成了AsyncStorage的读取（比如页面加载后提前获取数据存在state里），要么按钮的回调函数里正确用了.then()或者await等待异步操作完成，所以能拿到有效的用户名和密码再发请求。

但componentDidMount是组件挂载后立刻执行的，如果你直接在里面同步写请求代码，没等AsyncStorage的读取Promise resolve，请求就已经发出去了——这时候用户名和密码还都是undefined，GitHub API自然会返回“需要认证”的提示。

正确的处理方式 #

把componentDidMount改成异步函数，用await等待AsyncStorage读取完成，确认拿到有效数据后再发起API请求：

async componentDidMount() {
  try {
    // 先异步读取存储的用户名和密码
    const username = await AsyncStorage.getItem('github_username');
    const password = await AsyncStorage.getItem('github_password');

    // 先检查是否拿到了有效数据
    if (!username || !password) {
      console.log('找不到存储的GitHub认证信息，请先登录');
      // 这里可以跳转到登录页面或者提示用户
      return;
    }

    // 构造Basic Auth的认证头
    const authHeader = `Basic ${btoa(`${username}:${password}`)}`;

    // 现在带着认证信息发起请求
    const response = await fetch('https://api.github.com/notifications', {
      method: 'GET',
      headers: {
        'Authorization': authHeader,
        'Accept': 'application/vnd.github.v3+json'
      }
    });

    if (response.ok) {
      const notifications = await response.json();
      console.log('成功获取通知:', notifications);
      // 这里把通知数据存到state里或者做其他处理
    } else {
      console.error('请求失败:', response.status, response.statusText);
    }
  } catch (error) {
    console.error('读取存储或请求API时出错:', error);
  }
}

额外提醒 #

• 一定要处理异常：AsyncStorage读取可能失败（比如存储损坏），API请求也可能因为网络问题失败，所以用try/catch包裹整个流程很重要。
• 存储密码不安全：直接用AsyncStorage存明文密码风险很高，建议换成GitHub的OAuth授权流程，用token来认证，安全性更高。
• 避免重复读取：如果多个地方需要用到用户名/密码，可以在App启动时提前读取并存到全局状态（比如Redux或者Context）里，不用每次都调用AsyncStorage。

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