React中使用SuperAgent请求后，如何在.then()中判断成功再切换视图？

好问题！你当前的代码存在两个需要修正的问题：一是直接在.then()中调用this.props.setStep(ACCEPTANCE)会导致无论请求成功与否都会执行视图切换（因为你立刻执行了这个函数，而非将它作为回调传递给.then()）；二是没有验证API返回的success状态，无法确保业务逻辑层面的成功。

下面是两种推荐的实现方式，都能安全地判断请求成功后再切换视图：

方式一：链式调用（then/catch） #

acceptPromo (e) {
  e.preventDefault()
  const { offerId } = this.state
  superagent
    .post('/api/user/offers')
    .send({offerId})
    // 用箭头函数确保this指向组件实例
    .then((response) => {
      // 先判断响应体存在，再检查success字段
      if (response.body && response.body.success === true) {
        this.props.setStep(ACCEPTANCE)
      } else {
        // 处理业务逻辑失败的情况（比如API返回200但success为false）
        console.error('兑换优惠失败:', response.body)
        // 可添加用户提示，比如alert('兑换失败，请稍后重试')
      }
    })
    .catch((error) => {
      // 处理请求层面的错误（比如网络故障、API返回4xx/5xx状态码）
      console.error('请求出错:', error)
      // 同样可添加用户友好提示
    })
}

方式二：Async/Await（更易读） #

如果你习惯同步风格的异步代码，推荐用async/await写法：

async acceptPromo (e) {
  e.preventDefault()
  const { offerId } = this.state
  try {
    const response = await superagent
      .post('/api/user/offers')
      .send({offerId})
    
    // 验证业务逻辑成功
    if (response.body && response.body.success === true) {
      this.props.setStep(ACCEPTANCE)
    } else {
      console.error('兑换优惠失败:', response.body)
    }
  } catch (error) {
    // 捕获所有请求相关错误
    console.error('请求出错:', error)
  }
}

关键注意点 #

• this的绑定：用箭头函数或async函数可以确保回调中的this指向组件实例，避免this.props为undefined的问题。
• 严谨的状态判断：添加response.body && ...是为了防止API返回空响应或结构异常时出现Cannot read property 'success' of undefined的报错。
• 错误全覆盖：catch（或try/catch）能捕获网络错误、HTTP状态码错误等所有请求层面的问题，避免程序崩溃。

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