react hooks-页面实时刷新2（useRequest）

React Hooks：useRequest 实现页面实时刷新与轮询

原创已于 2023-01-13 15:06:42 修改 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #ecmascript

于 2022-11-10 19:40:11 首次发布

本文介绍了如何使用React Hooks中的useRequest实现页面的实时刷新和轮询功能。useRequest是一个强大的异步数据管理Hook，提供统一的网络请求处理方案。通过设置pollingInterval，可以开启轮询模式，定时更新页面数据。同时，文章还展示了如何配置轮询选项、手动触发请求以及取消轮询的例子。

总述：

页面能够实时刷新，归根结底是用了定时器的原理

1. 用setInterval直接实现 -> react hooks-页面实时刷新（setInterval）

2. 用封装好的hook函数实现（useRequest - pollingInterval）

一、什么是useRequest？

useRequest 是一个强大的异步数据管理的 Hooks。是基于 umi-request 和 ahooks ，提供了一套统一的网络请求和错误处理方案，React 项目中的网络请求场景基本用它就够了。它通过插件式组织代码，核心代码极其简单。

默认情况下，useRequest 第一个参数是一个异步函数，在组件初始化时，会自动执行该异步函数。同时自动管理该异步函数的 loading , data , error 等状态。

二、useRequest 轮询（页面自动刷）

通过设置 options.pollingInterval，进入轮询模式，useRequest 会定时触发 service 执行。

const { data, run, cancel,loading } = useRequest(getUsername, {
  pollingInterval: 3000,  //轮询间隔，单位为毫秒。
  pollingErrorRetryCount: 3,  //轮询错误重试次数。如果设置为 -1，则无限次
  pollingWhenHidden: false ,  //在页面隐藏时，是否继续轮询。 false 隐藏时会暂时停止，页面重新显示时继续上次轮询。

});

三、useRequest API

四、来个栗子：

//定时获取任务列表
const queryList = useRequest(queryTaskList,{  //queryTaskLists是接口函数(异步函数)
    manual:true,
    pollingInterval:2000;
    pollingWhenHidden:false;
    loadingDelay:200;
    formatResult:(res)=>res;
    onSuccess:(data)=>{
        if(data.code!==200){
            message.error(data.msg);
        }else{
           setlist(data.data)
        }
    };
    onError:(err)=>{message.error(err);}

})

async function queryTaskList(){
    return request('api/task/list',{
        method:get,
    });
}

页面函数调用：