React Redux-Saga中如何设置API调用请求超时？

问题描述 #

我后端是基于Django的REST API，需要执行一个耗时约1.5分钟的重型处理。前端React应用调用该API时出现了timeout of 60000ms exceeded的错误，连接直接断开了。

以下是我Redux-Saga中的代码片段：

export function* create(action) {
  try {
    const { payload } = action;
    const response = yield call(api.addPost, payload); 
    // 能不能在这里给这个API调用设置超时？现在60秒就超时了
    if (response.status === 200) {
      console.log('pass 200 check');
      yield put(appActions.setResourceResponse(response.data));
      console.log(response.data);
      payload.push('/add-news');
    }
  } catch (error) {
    console.log(error);
    yield put(
      a.setResponse({
        message: error.response.data,
        status: error.response.status,
      }),
    );
  }
}

请问如何在Redux-Saga中为这个API调用设置请求超时？

解决方案 #

这是长耗时API调用里很常见的问题，我给你几个实用的解决思路：

1. 用Redux-Saga的race效果实现请求超时（推荐）

Redux-Saga的race效果就是专门干这个的——它会同时执行多个任务，只返回第一个完成的任务结果。我们可以让API调用和一个超时定时器“竞速”，如果定时器先触发，就判定为超时。

修改你的代码如下：

import { call, put, race } from 'redux-saga/effects';
import { delay } from 'redux-saga/effects'; // redux-saga自带的延迟工具

export function* create(action) {
  try {
    const { payload } = action;
    // 设置超时时间为100000ms（1分40秒，留一点冗余覆盖1.5分钟的处理时间）
    const TIMEOUT_DURATION = 100000;

    // 同时启动API调用和超时定时器
    const { response, timeout } = yield race({
      response: call(api.addPost, payload),
      timeout: call(delay, TIMEOUT_DURATION)
    });

    // 如果超时先触发，处理超时逻辑
    if (timeout) {
      yield put(
        a.setResponse({
          message: '请求处理超时，请稍后重试',
          status: 408 // HTTP 408 请求超时状态码
        })
      );
      return; // 终止后续逻辑
    }

    // API调用成功完成，继续原有逻辑
    if (response.status === 200) {
      console.log('pass 200 check');
      yield put(appActions.setResourceResponse(response.data));
      console.log(response.data);
      payload.push('/add-news');
    }
  } catch (error) {
    console.log(error);
    yield put(
      a.setResponse({
        message: error.response?.data || '请求失败',
        status: error.response?.status || 500,
      }),
    );
  }
}

2. 直接在API客户端层面设置超时

如果你的api.addPost是用Axios、Fetch这类HTTP客户端封装的，可以直接给这个请求单独设置超时时间：

Axios示例：

// 假设你的api模块是这样封装的
import axios from 'axios';

const api = {
  addPost: (payload) => axios.post('/api/posts', payload, {
    timeout: 100000 // 这里设置1分40秒的超时
  })
};

Fetch示例：

Fetch本身没有内置超时，但可以用AbortController实现：

const api = {
  addPost: async (payload) => {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 100000);

    try {
      const response = await fetch('/api/posts', {
        method: 'POST',
        body: JSON.stringify(payload),
        signal: controller.signal
      });
      clearTimeout(timeoutId);
      return response;
    } catch (error) {
      if (error.name === 'AbortError') {
        throw new Error('请求超时');
      }
      throw error;
    }
  }
};

这种方法更直接，但要注意如果你的客户端有全局超时配置，需要确保请求级的配置能覆盖全局。

额外的架构优化建议

虽然设置超时能解决当前问题，但1.5分钟的同步HTTP请求其实不是最优方案——很容易因为网络波动、服务器代理超时等因素失败。更稳妥的做法是：

• 后端把重型处理改成异步任务（比如Django用Celery+Redis），收到请求后立刻返回一个任务ID
• 前端用这个任务ID轮询后端的任务状态接口，直到任务完成或失败
• 或者用WebSocket/SSE让后端主动通知前端处理结果

这样不仅能避免长时间占用HTTP连接，还能给用户显示处理进度，提升体验。

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