redux-saga如何处理取消异步操作？

王小婷

发布于 2025-05-25 16:11:29

10800

代码可运行

运行总次数：0

代码可运行

在 redux-saga 中，取消异步操作是一个常见需求，特别是在处理多个并发请求时。有几种方法可以实现取消异步操作，主要依赖于 redux-saga 提供的 cancel、takeLatest 和 takeEvery 等效果函数。以下是一些常用的方法和示例。

1. 使用 `takeLatest`

takeLatest 会在接收到相同的 action 时，自动取消之前的任务，只保留最后一个。适合处理请求的场景，比如搜索建议。

示例

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

// 异步请求函数
function* fetchData(action) {
  try {
    const response = yield call(fetch, `/api/data?query=${action.payload}`);
    const data = yield response.json();
    yield put({ type: 'FETCH_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_FAILURE', payload: error });
  }
}

// 监听 FETCH_REQUEST 动作
function* watchFetchData() {
  yield takeLatest('FETCH_REQUEST', fetchData);
}

export default watchFetchData;

在这个示例中，如果用户频繁地触发 FETCH_REQUEST 动作，只有最后一次的请求会被处理，之前的请求会被自动取消。

2. 使用 `cancel` 和 `fork`

如果需要更细粒度的控制，可以使用 fork 创建任务，并在需要时手动取消。

示例

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

// 异步请求函数
function* fetchData(action) {
  try {
    const response = yield call(fetch, `/api/data?id=${action.payload}`);
    const data = yield response.json();
    yield put({ type: 'FETCH_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_FAILURE', payload: error });
  }
}

// 监听 FETCH_REQUEST 动作
function* watchFetchData() {
  while (true) {
    const action = yield take('FETCH_REQUEST');
    const task = yield fork(fetchData, action); // 启动异步请求

    // 等待 FETCH_CANCEL 动作
    yield take('FETCH_CANCEL');
    yield cancel(task); // 取消请求
  }
}

export default watchFetchData;

在这个例子中，当接收到 FETCH_REQUEST 时，会启动一个异步请求。如果在请求进行中接收到 FETCH_CANCEL 动作，则会取消这个请求。

3. 使用 `take` 和 `cancel`

如果需要在多个不同动作中处理取消，可以创建一个 saga 来监听特定的动作，并在接收到取消动作时取消之前的操作。

示例

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

// 异步请求函数
function* fetchData(action) {
  try {
    const response = yield call(fetch, `/api/data?id=${action.payload}`);
    const data = yield response.json();
    yield put({ type: 'FETCH_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_FAILURE', payload: error });
  }
}

// 监听 FETCH_REQUEST 动作
function* watchFetchData() {
  while (true) {
    const action = yield take('FETCH_REQUEST');
    const task = yield fork(fetchData, action); // 启动异步请求

    // 监听 FETCH_CANCEL 动作
    yield take('FETCH_CANCEL');
    yield cancel(task); // 取消请求
  }
}

export default watchFetchData;