如何延迟异步Thunk动作至认证会话令牌存入AsyncStorage后执行？

这个问题我之前也碰到过，核心就是异步操作的时序没处理好——存令牌到AsyncStorage是异步的，而你跳转后立刻触发数据请求，这时候令牌还没完成存储，自然导致请求拿不到有效凭证。给你几个靠谱的解决思路：

方案1：在登录Thunk里严格控制执行顺序 #

最直接的办法是在登录的异步Thunk中，确保令牌成功存入AsyncStorage后，再执行跳转和数据请求。用await把异步操作串起来，保证时序正确：

export const loginUser = (email, password) => async (dispatch) => {
  try {
    // 1. 发送登录请求获取JWT
    const res = await axios.post('/api/auth/login', { email, password });
    const authToken = res.data.token;

    // 2. 等待令牌写入AsyncStorage完成
    await AsyncStorage.setItem('authToken', authToken);

    // 3. 更新Redux状态标记登录成功
    dispatch({ type: 'AUTH_LOGIN_SUCCESS', payload: authToken });

    // 4. 跳转目标页面 + 触发数据请求Thunk
    dispatch(NavigationActions.navigate({ routeName: 'Home' }));
    dispatch(fetchUserProfile()); // 你的数据请求Thunk
  } catch (err) {
    dispatch({ type: 'AUTH_LOGIN_FAILURE', payload: err.response.data.message });
  }
};

这里的关键是await AsyncStorage.setItem(...)，它会阻塞后续代码直到令牌存储完成，这样后面的fetchUserProfile执行时，就能从AsyncStorage拿到有效的令牌了。

方案2：在目标页面组件中等待令牌就绪 #

如果不想在登录Thunk里耦合跳转和请求逻辑，可以在目标页面的组件中，监听登录状态或令牌的存在，再触发数据请求：

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { fetchUserProfile } from '../redux/actions';

const HomeScreen = () => {
  const dispatch = useDispatch();
  const isLoggedIn = useSelector(state => state.auth.isLoggedIn);

  useEffect(() => {
    const loadData = async () => {
      // 先确认令牌已存在
      const token = await AsyncStorage.getItem('authToken');
      if (token && isLoggedIn) {
        dispatch(fetchUserProfile());
      }
    };

    loadData();
  }, [isLoggedIn, dispatch]);

  // 页面渲染逻辑...
};

或者更简单的，如果你的Redux状态里已经保存了令牌，可以直接监听令牌的变化：

const authToken = useSelector(state => state.auth.token);

useEffect(() => {
  // 当令牌存在时才触发请求
  if (authToken) {
    dispatch(fetchUserProfile());
  }
}, [authToken, dispatch]);

方案3：在数据请求Thunk中确保获取到令牌 #

给所有需要认证的请求Thunk加一层“令牌检查”，先从AsyncStorage拿到令牌再发送请求：

export const fetchUserProfile = () => async (dispatch) => {
  try {
    // 先获取令牌，等待存储完成
    const authToken = await AsyncStorage.getItem('authToken');
    if (!authToken) {
      throw new Error('未找到有效认证令牌');
    }

    // 设置请求头发送请求
    const res = await axios.get('/api/user/profile', {
      headers: { Authorization: `Bearer ${authToken}` }
    });

    dispatch({ type: 'FETCH_PROFILE_SUCCESS', payload: res.data });
  } catch (err) {
    dispatch({ type: 'FETCH_PROFILE_FAILURE', payload: err.message });
    // 令牌不存在时跳回登录页
    dispatch(NavigationActions.navigate({ routeName: 'Login' }));
  }
};

AsyncStorage的操作是队列化的，也就是说如果之前的setItem还在执行，后续的getItem会等待它完成后返回最新值，所以即使请求触发得早，也能拿到正确的令牌。

个人推荐 #

我最常用的是方案1，因为它把登录、存令牌、跳转、请求的逻辑串成了一个完整的异步流程，时序最清晰，也避免了组件里额外的状态检查，代码更整洁。

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