dvajs 写轮询，简单好用的方法

首先，您应该会dvajs, 本来ts版本的，我给改成js 好看一些，那么您就可以看下这个代码的所以然，期望能对您有所帮助，这是笔者实际工作中写的方法，有什么不太好的，欢迎吐槽。

简单粗暴  直接上代码

文件  pollingEffect.js

// import { Effect, EffectType } from 'dva';
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// interface IOptions {
//   namespace: string;
//   pollingMills?: number;
//   pollingKey?: string;
//   cancelPollingKey?: string;
// };

/**
 * @description saga轮询函数包装器
 * @param {IOptions} option 轮询参数设置
 * @param {string} option.namespace 轮询saga所在model命名空间
 * @param {number} option.pollingMills 轮询saga时长，默认 1000 * 10s
 * @param {string} option.pollingKey 轮询saga开启轮询take阻塞key值，默认值：watch
 * @param {string} option.cancelPollingKey 轮询saga关闭轮询take阻塞key值，默认值：unwatch
 * @param {Effect} doPolling 轮询saga
 * @param {Effect} cancelPolling 取消轮询saga
 * @returns {Array<Effect,{type:EffectType}>} 返回dva effect数组结构
 */
export default (option, doPolling, cancelPolling) => {
  return [
    function* (effect) {
      const { call, race, take, cancel, fork } = effect;
      let lastTask;

      function* doQuery(action) {
        while (true) {
          yield call(delay, option.pollingMills || 1000 * 5);
          yield call(doPolling, action, effect);
          if (cancelPolling) {
            const $cancel = yield call(cancelPolling, action, effect);
            if ($cancel) {
              break;
            }
          }
        }
      }

      while (true) {
        const watchKey = `${option.namespace}/${option.pollingKey || "watch"}`;
        const unWatchKey = `${option.namespace}/${option.cancelPollingKey || "unwatch"}`;
        const { watch } = yield race({
          watch: take(watchKey),
          unwatch: take(unWatchKey)
        });
        if (lastTask) {
          yield cancel(lastTask);
        }
        if (watch) {
          lastTask = yield fork(doQuery, watch);
        }
      }
    },
    { type: "watcher" }
  ];
}

module.js

import pollingEffect from '@/util/pollingEffect'


    // chart(私有平台)列表
    chartList: [
      function*({ payload }, { call, put, select }) {
        console.log(payload,'payload2222')
        const { workspace } = utilities.tenantAndWorkspace;
        const chartType = yield select(state => state.plantform.chartTypeVariable);
        payload.workspace = workspace.identity;
        payload.chartType = chartType;
        try {
          const res = yield call(servicesWithSpin.chartList, payload);
          yield put({ type: 'getchartList', payload: res });
          yield put({ type: 'finishUpload' });
        } catch (error) {
          yield put({
            type: 'global/error',
            payload: {
              error: error.result_msg || error.message || error.resultMessage || error.resultCode,
            },
          });
        }
      },
      { type: 'takeLatest' },
    ],

        // 添加轮询
      plloingChartList: pollingEffect({
          namespace: 'plantform',
        }, function* ({ payload }, { put, take }) {
          console.log(payload,'payload')
          yield put({ type: 'chartList', payload });
          yield take(`plantform/chartList/@@end`);
        }),

接下来 直接在 UI 中用

  useEffect(()=>{
    if(chartTypeVariable === 'public') {
      dispatch({
        type: 'plantform/watch',
        payload: {
            keyword: '',
          },
      })
    }
    return ()=>{
       dispatch({
        type: 'plantform/unwatch',
       })
    }

  },[chartTypeVariable])