Redux-Saga中请求耗时超1秒时显示提示文本的问题

你的代码为什么无效？ #

• 你直接把yield put(...)作为setTimeout的第一个参数，JavaScript会立即执行这个表达式，然后把执行结果传给setTimeout，根本不会等待1秒再执行put动作。
• 更核心的问题：Redux Saga的yield关键字只能在Generator函数的顶层或者Saga提供的效果（比如call/fork）内部使用，不能放在普通的setTimeout回调里——Saga的调度器无法追踪这些回调里的yield逻辑，相当于脱离了Saga的控制流。
• 另外代码里有拼写错误：setoaderMessage应该是setLoaderMessage。

正确实现方式（两种可选） #

方式1：使用race效果（推荐，Saga标准超时处理）

race效果会同时启动多个任务，只返回第一个完成的任务结果，适合判断API是否超时：

import { call, put, race, delay } from 'redux-saga/effects';

function* fetchReportSaga() {
  // 初始清空提示
  yield put(setLoaderMessage(''));

  // 同时启动API调用和1秒延迟任务
  const { timeout, response } = yield race({
    timeout: delay(1000),
    response: call("My api call", "payload")
  });

  if (timeout) {
    // 超时触发：API还没返回，显示提示
    yield put(setLoaderMessage('The requested report data is being loaded, this may take some time.'));
    // 继续等待API返回
    const responseData = yield call("My api call", "payload");
    // API返回后清空提示
    yield put(setLoaderMessage(''));
    // 这里可以处理responseData
  } else {
    // API快速返回：直接清空提示
    yield put(setLoaderMessage(''));
    const responseData = response;
    // 处理返回数据
  }
}

方式2：使用fork+cancel（更简洁）

启动一个延迟显示提示的后台任务，API完成后取消这个任务（如果还没执行）：

import { call, put, fork, cancel, delay } from 'redux-saga/effects';

// 单独写延迟显示提示的Saga
function* showLoaderAfterDelay() {
  yield delay(1000);
  yield put(setLoaderMessage('The requested report data is being loaded, this may take some time.'));
}

function* fetchReportSaga() {
  // 启动延迟任务
  const loaderTask = yield fork(showLoaderAfterDelay);

  try {
    // 执行API调用
    const responseData = yield call("My api call", "payload");
    // API返回后清空提示
    yield put(setLoaderMessage(''));
    // 处理responseData
  } finally {
    // 无论API成功/失败，都取消延迟任务（避免提示在API完成后才弹出）
    yield cancel(loaderTask);
  }
}

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