react hook 接口轮询

老妞發表於 2022-6-2 10:59:00

<div class="cnblogs_code">
<pre>// 轮询接口

import { useCallback, useRef, useEffect } from "react";
const sleep = (time) => {
return new Promise((resolve) => setTimeout(resolve, time));
};
const useUnMount = (fn) => {
useEffect(
() => () => {
 fn();
},

);
};

const usePolling = (polling) => {
const isPollingRef = useRef(false);
const cancelRef = useRef(false);

const doPolling = useCallback(() => {
// 是否正在轮询，是，返回，不能多个接口同时轮询，避免这些接口有先后顺序相互影响
if (isPollingRef.current) {
 return;
}
isPollingRef.current = true;

const pollNext = async () => {
 // 如果掉了取消轮询，那么就返回不执行
 if (cancelRef.current) {
 isPollingRef.current = false;
 cancelRef.current = false;
 return;
 }
 // 发送请求，返回值组装一下，给个 hasFinshed 判断是否还要继续轮询
 const { hasFinshed } = await polling();

 if (!hasFinshed) {
 await sleep(3000);
 pollNext();
 } else {
 isPollingRef.current = false;
 }
};

pollNext();
}, );

const cancelPolling = useCallback(() => {
if (isPollingRef.current) {
 cancelRef.current = true;
}
}, []);

useUnMount(cancelPolling);

return ;
};

export default usePolling;</pre>
</div>
<h2>调用示例</h2>
<div class="cnblogs_code">
<pre>import usePolling from "@/plugins/usePolling";

/* ========== 导入轮询 ========== */
const submitPublicBagPolling = useCallback(async () => {
let resPolling = await axios
 .post("/progress", {
 id: id,
 })
 .catch(() => {
 setLoading(false);
 });
if (!resPolling) {
 setLoading(false);
 return { hasFinshed: true };
}
if (resPolling.data?.finish) {
 message.success(``);
 setLoading(false);
}
return { hasFinshed: resPolling.data?.finish };
// eslint-disable-next-line react-hooks/exhaustive-deps
}, );
const = usePolling(submitPublicBagPolling); //接口轮询hook
/* ========== 导入 ========== */
const submitPublicBag = async (values) => {
if (Object.keys(values).length == 0) {
 setPublicBagVis(false);
 return;
}
setLoading(true);
let res = await axios.post("/batchsms/contact/crowdpack/submit", {
 ...values,
 id: id,
});
if (!res) {
 setLoading(false);
 return false;
}
if (res.data?.finish) {
 message.success(``);
 setLoading(false);
} else {
 doPollingType();
}
};</pre>
</div>
 
参考：https://juejin.cn/post/7085174569484582925

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：Janni，转载请注明原文链接：https://www.cnblogs.com/janni/p/16337021.html 
来源：https://www.cnblogs.com/janni/p/16337021.html

頁: [1]

琼殿技术论坛's Archiver

react hook 接口轮询