写在开头
最近负责的项目要接入计费功能,有了计费自然需要充值。说起充值,无外乎支付宝、微信和网银了,然后前端调用充值接口后,需要起一个轮询任务,去监听支付状态,根据轮询结果来进行下一步的操作(当然了,有条件的大户人家想要直接上websocket也没问题)。所以,业务场景倒是很easy,梳理完逻辑我就吭哧吭哧开搞了…
发现问题
然而,当我基本写完在调试时,发现每次轮询停止了,页面上的状态会刷新两次。当时的业务是需要我在支付状态时显示验证码过期的倒计时,然而倒计时结束后会重新计时一次,这里的场景可以不关心,直观的表现就是轮询清除后状态更新了两次,而且是偶现!
import { useRef, useState } from 'react';
export const useRechargeResult = () => {
const intervalRef = useRef<number | undefined>(void 0);
const [rechargeStatus, setRechargeStatus] = useState(0);
const getRechargeStatus = async (sequence: string) => {
await axios.post('/bill/recharge/status', {
sequence
})
.then(res => {
setRechargeStatus(res?.data?.status || 0);
// 1.充值中 2.充值成功 3.充值失败 4.充值过期
if (res?.data?.status !== 1) {
clearPolling();
}
});
};
const startPolling = (sequence: string) => {
intervalRef.current = setInterval(() => {
getRechargeStatus(sequence);
}, 1000);
};
const clearPolling = () => {
clearInterval(intervalRef.current);
intervalRef.current = void 0;
};
return {
rechargeStatus,
setRechargeStatus,
startPolling,
clearPolling
};
};
bug原因
代码如上,思考了良久,我觉得是js执行机制哪里我疏忽了,还有为什么是偶现呢?于是乎,经过debuger后,我发现了问题所在。
假如getRechargeStatus
函数没有then回调,clearInterval(timerId)
可以很轻松的清除定时任务,不会让它进入js执行栈中执行。
如果这样写const { data } = await getRechargeStatus()
或者await getRechargeStatus().then(res => {})
,而且js现在处于setTimeout的回调函数已经执行并且在await
状态中,那么js清除了setInterval
的回调函数的执行(此时最后一次setTimeout的回调函数已经执行),但是却没有清除await getRechargeStatus()
的回调函数,还在苦苦等待…。所以,最后一次轮询的异步回调(即then中的代码)会继续执行,导致了轮询停止后,页面状态又更新了一遍。
请求的时间越长,这个状态(setTimeout的回调函数已经执行并且在await
状态中)出现的概率越高。这就是为什么,偶现。
所以,我在回调中处理了一下,如果轮询不存在的话,就不执行,问题解决了,手动狗头。
const getRechargeStatus = async (sequence: string) => {
await httpBillClient
.post('/bill/recharge/detail', {
sequence
})
.then(res => {
// 清除定时器时,并不能清除异步请求的回调,所以这里要限制一下
if (intervalRef.current) {
setRechargeStatus(res?.data?.status || 0);
}
// 1.充值中 2.充值成功 3.充值失败 4.充值过期
if (res?.data?.status !== 1) {
clearPolling();
}
});
};
参考链接:https://blog.csdn.net/weixin_34309543/article/details/88838560