如何使用React + SWR轮询API持续查询AWS异步任务的处理状态？

实现方案 #

你要的效果直接通过SWR内置的refreshInterval动态配置就能实现，不需要额外写轮询逻辑。这个配置项支持传入函数，可根据当前接口返回的结果动态决定是否继续轮询：

• 当任务状态为complete/failed/请求报错时返回0，停止轮询
• 当任务处于加载中时返回你需要的轮询间隔（比如2000，即每2秒查询一次状态，可按需调整）

修改后的useSWR代码如下： #

const { data: rawServiceData, error } = useSwr(
  serviceEndpoint,
  url => axios.get(url).then(r => r.data),
  {
    // 核心动态轮询配置
    refreshInterval: (data, error) => {
      // 出现错误、任务失败、任务完成时，停止轮询
      if (error || data?.type === 'complete' || data?.type === 'failed' || data?.type === 'error') {
        return 0
      }
      // 其他情况每2秒轮询一次
      return 2000
    },
    // 可选配置：页面切到后台时是否继续轮询，按需开启
    // refreshWhenHidden: true,
    onSuccess: data => {
      if (data.type === 'complete') {
        dispatch(
          setStatus({
            type: 'success',
            data: data.message,
            message: 'service has been successfully generated.',
            display: 'support-both',
          })
        );
        dispatch(setRawService(data.message));
      }
      if (data.type === 'loading') {
        dispatch(
          setStatus({
            type: 'success',
            data: data.message,
            message: 'service job is in progress.',
            display: 'support-both',
          })
        );
      }
      // 新增失败状态处理
      if (data.type === 'failed' || data.type === 'error') {
        dispatch(
          setStatus({
            type: 'error',
            data: data.message,
            message: `任务执行失败：${data.message}`,
            display: 'support-both',
          })
        );
      }
    },
    // 新增请求错误处理
    onError: (err) => {
      dispatch(
        setStatus({
          type: 'error',
          message: `查询任务状态失败：${err.message}`,
          display: 'support-both',
        })
      );
    }
  }
);

额外注意点 #

你提供的API代码里有个变量名笔误：声明的是const { jobStatus } = serviceResponse.serviceJob;，后续使用的是serviceJobStatus，会导致报错，建议修改为const { jobStatus: serviceJobStatus } = serviceResponse.serviceJob;即可。

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