React中结合Action Reducers的Promise链式调用问题

你的问题核心是Promise链式调用的错误冒泡机制导致第二个请求的错误被第一个catch捕获，同时需要在不依赖store的前提下保留第一个请求的结果。下面是具体的分析和两种可行方案：

原代码问题分析 #

原代码的链式结构是：

getServerDetails()
  .then(...) // 包含第二个请求
  .catch(...) // 捕获第一个请求+第二个请求的错误
  .then(...)
  .catch(...) // 仅捕获前面catch/then的错误，而非第二个请求的错误

由于getServerScomAlerts是在第一个then中返回的Promise，它的错误会向上冒泡到最近的catch（也就是标记3的那个），导致第二个请求的错误无法触发标记4的catch，同时你也没法直接拿到第一个请求的数据。

方案一：嵌套Promise链（直观易读） #

通过嵌套的方式把第二个请求的错误处理逻辑与第一个请求的错误处理分离，同时直接在内部保留第一个请求的结果：

getServerDetails(this.props.match.params.id) //1
  .then(res => {
    // 保存第一个请求的结果，无需访问store
    const serverData = res.data;
    this.props.getServerDetailsAction({ success: true, data: serverData });

    if (!_.isEmpty(serverData)) {
      // 嵌套处理第二个请求，单独捕获它的错误
      return getServerScomAlerts(serverData.ServerName) //2
        .then(alertRes => {
          this.props.getServerScomAlertsAction({ success: true, data: alertRes.data });
        })
        .catch(alertErr => { 
          // 仅捕获getServerScomAlerts的错误，对应原问题的catch块4
          this.props.getServerScomAlertsAction({ success: false, error: alertErr });
        });
    }
  })
  .catch(serverErr => { 
    // 仅捕获getServerDetails的错误，对应原问题的catch块3
    this.props.getServerDetailsAction({ success: false, error: serverErr });
  });

优势： #

• 逻辑清晰，错误边界明确：第一个请求的错误走外层catch，第二个请求的错误走内层catch
• 直接在then中保留serverData，完全不需要访问store

方案二：链式传递结果对象（适合复杂场景） #

如果需要在后续链式调用中继续使用第一个请求的数据，可以把结果封装成对象传递，同时单独处理第二个请求的错误：

getServerDetails(this.props.match.params.id) //1
  .then(res => {
    const serverData = res.data;
    this.props.getServerDetailsAction({ success: true, data: serverData });

    if (_.isEmpty(serverData)) {
      // 没有需要请求的告警数据，返回封装后的结果
      return { serverData, alertData: null };
    }

    // 发起第二个请求，封装结果或捕获错误
    return getServerScomAlerts(serverData.ServerName) //2
      .then(alertRes => ({ serverData, alertData: alertRes.data }))
      .catch(alertErr => {
        // 处理第二个请求的错误
        this.props.getServerScomAlertsAction({ success: false, error: alertErr });
        // 返回包含错误和第一个请求数据的对象
        return { serverData, alertError: alertErr };
      });
  })
  .then(result => {
    // 这里可以直接拿到第一个请求的serverData
    console.log("第一个请求的数据：", result.serverData);
    // 处理第二个请求成功的情况
    if (result.alertData) {
      this.props.getServerScomAlertsAction({ success: true, data: result.alertData });
    }
  })
  .catch(serverErr => {
    // 仅捕获第一个请求的错误
    this.props.getServerDetailsAction({ success: false, error: serverErr });
  });

优势： #

• 可以在后续的链式调用中复用第一个请求的数据
• 错误处理依然隔离，第二个请求的错误不会触发第一个请求的catch

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