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

总述：

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

        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();