React Native+Redux+Axios场景下如何将前一个Axios请求结果传递给后一个请求

核心问题根源：

1. 现有的retrieveToken异步Action没有返回Promise，无法通过链式调用确保执行顺序
2. 首页触发retrieveData时未判断token是否已经获取完成，导致请求发起时token还是初始空值
3. 若直接在请求函数定义时调用store.getState()，取到的是初始化时的token值，不会随状态更新而变化

步骤1：改造异步Action返回Promise #

修改retrieveToken代码，返回请求的Promise实例，方便后续控制执行顺序：

export const retrieveToken = () => dispatch => {
  dispatch(tokenActionCreators.request());
  // 新增return把Promise返回
  return getToken()
    .then(token => {
      dispatch(tokenActionCreators.success(token));
      return token; // 把token透传给后续then调用
    })
    .catch(error => {
      dispatch(tokenActionCreators.failure(error));
      return Promise.reject(error);
    });
};

步骤2：固定getData传参逻辑 #

保留你之前的改法，让getData明确接收token作为入参即可：

export const getData = (token) =>
  apiInstance
    .request({
      url: ENDPOINTS.DATA,
      method: 'POST',
      data: qs.stringify({
        timestamp: Date.now(),
        c_id: 'some_id',
        token: token, 
      }),
      headers: {
        'content-type': 'some_content_type',
      },
    })
    .then(response => {
      return response.data;
    })
    .catch(error => {
      return Promise.reject(error.message);
    });

步骤3：实现请求顺序控制，提供两种适配场景的方案 #

方案A：组件层面控制（适配你当前跨页面触发的场景） #

首页触发请求时，把redux中的token作为useEffect的依赖，仅当token存在时才发起数据请求：

1. 先实现retrieveData的Action代码：

export const retrieveData = (token) => dispatch => {
  dispatch(dataActionCreators.request());
  return getData(token)
    .then(data => dispatch(dataActionCreators.success(data)))
    .catch(error => dispatch(dataActionCreators.failure(error)));
};

2. 首页的useEffect改造：

// 先从redux中取token和加载状态
const { token, loadingToken } = useSelector(state => state.token);
const dispatch = useDispatch();

useEffect(() => {
  // 只有token不是初始空值、且没有在加载token时才发起请求
  if (token && !loadingToken) {
    dispatch(retrieveData(token));
  }
}, [dispatch, token, loadingToken]);

方案B：Thunk内部链式调用（适合两个请求不需要跨页面触发的场景） #

如果后续有需求要在同一个逻辑里连续触发两个请求，可以直接在Thunk里串联：

export const retrieveTokenAndData = () => async dispatch => {
  try {
    const token = await dispatch(retrieveToken());
    await dispatch(retrieveData(token));
  } catch (err) {
    console.error('请求失败', err);
  }
};

额外注意点 #

你当前Reducer里token的初始值是[]空数组，如果接口返回的token是字符串格式，建议把初始值改成null，判断逻辑会更清晰，避免空数组假值判断的坑。

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