0

GET_CHART_DATA是一个调用和 api 以根据 chartId 获取图表数据的操作。假设GET_CHART_DATA被调用chartId='123'并且 api 使用该 chartId 向服务器发送请求。请求处于待处理状态。我GET_CHART_DATA再次使用相同的 chartId 发送相同的操作 ie123，在这种情况下，之前对相同 chartId 的请求应该被取消。（注意：使用 chartId 其他参数，但这些参数不同，这就是为什么我要取消将具有旧参数的旧请求）

问题是可能还有其他GET_CHART_DATA使用不同chartIds的请求。现在我不想取消这些请求。我只想取消以前具有相同图表 ID 的请求。

这是我的 action.js 和 sagas.js 文件。（样本）

   // action.js
    export function getChartData(params) {
      return {
        type: 'GET_CHART_DATA',
        params, // { chartid: '123' }
      };
    }

export function cancelPreviousDataCall(chartId) {
  return {
    type: 'CANCEL_PREVIOUS_DATA_CALL',
    chartId,
  };
}

// sagas.js
export function* getChartData(params) {
  try {
    const { result } = yield race({
      result: call(Api.getChartData, params.chartid),
      cancel: take('CANCEL_PREVIOUS_DATA_CALL'),
    });
  } catch (error) {}
}

   function* watchGetChartData() {
      while (true) {
        const { params } = yield take('GET_CHART_DATA');
        yield fork(getChartData, params);
      }
    }
4

1 回答 1

0

您可以跟踪每个特定的分叉任务chartId。然后，如果任务仍在运行，您可以取消该任务。例如，您watchGetCharData可能是这样的：

function* watchGetChartData() {
    let tasksByChartId = {}
    while (true) {
        const { params } = yield take('GET_CHART_DATA')
        if (tasksByChartId[params.chartId] && tasksByChartId[params.chartId].isRunning()) {
            tasksByChartId[params.chartId].cancel()
        }
        tasksByChartId[params.chartId] = yield fork(getChartData, params)
    }
}

有了这个，你应该不再需要这个CANCEL_PREVIOUS_DATA_CALL动作

于 2018-12-27T14:07:50.600 回答