总述:
页面能够实时刷新,归根结底是用了定时器的原理
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,
});
}
页面函数调用:
queryList.run();
取消轮询:
queryList.cancle();