React.js：如何在一个方法完全执行后调用另一个方法

你的问题核心在于fetchNewsApiOrg是一个异步API请求函数，它不会阻塞后续代码的执行——当前代码里getNewsDesc会在fetchNewsApiOrg还没完成请求时就立刻运行，这显然不符合你“先完成第一个再执行第二个”的需求。

要实现这个顺序控制，我们需要利用Promise来管理异步操作的执行顺序，下面是两种常用的实现方式：

方法一：使用async/await（推荐，代码更简洁易读） #

把handleSearchClick声明为异步函数，用await关键字等待fetchNewsApiOrg的异步请求完成后，再执行getNewsDesc：

handleSearchClick = async () => {
  // 等待fetchNewsApiOrg的异步请求完全完成
  await this.props.fetchNewsApiOrg(this.newsSourceName);
  // 请求完成后再执行第二个函数
  this.props.getNewsDesc();
}

可选：添加错误处理 #

如果需要处理请求失败的情况，可以搭配try/catch块捕获错误：

handleSearchClick = async () => {
  try {
    await this.props.fetchNewsApiOrg(this.newsSourceName);
    this.props.getNewsDesc();
  } catch (error) {
    console.error('获取新闻源数据失败:', error);
    // 这里可以添加用户可见的错误提示，比如弹出提示框或更新页面状态
  }
}

方法二：使用Promise的.then()链式调用 #

如果你更习惯传统的Promise写法，也可以通过.then()指定异步操作完成后的回调：

handleSearchClick = () => {
  this.props.fetchNewsApiOrg(this.newsSourceName)
    .then(() => {
      // 仅在fetchNewsApiOrg成功完成后执行
      this.props.getNewsDesc();
    })
    .catch(error => {
      console.error('获取新闻源数据失败:', error);
      // 处理错误逻辑，比如提示用户
    });
}

关键前提：确保fetchNewsApiOrg返回Promise #

上面两种方法都依赖于fetchNewsApiOrg这个action creator返回一个Promise。如果你的Redux使用了redux-thunk中间件，可以这样修改你的action creator：

export const fetchNewsApiOrg = (newsSourceName) => {
  return async (dispatch) => {
    try {
      // 发起实际的API请求
      const response = await fetch(`https://your-api-url/${newsSourceName}`);
      const newsData = await response.json();
      
      // 分发action更新Redux store
      dispatch({
        type: 'FETCH_NEWS_SUCCESS',
        payload: newsData
      });
      
      return newsData; // 返回数据，让外部可以获取Promise的结果
    } catch (error) {
      dispatch({
        type: 'FETCH_NEWS_FAILURE',
        payload: error.message
      });
      throw error; // 抛出错误，让外部的catch可以捕获
    }
  };
}

这样，当你调用this.props.fetchNewsApiOrg()时，它会返回一个Promise，await或.then()才能正确控制执行顺序。

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