实现 AbortController 机制来控制 API 请求的取消行为,使其在组件卸载时或在发起新请求时取消先前的请求

  • AbortController 的使用: 在 useEffect 中使用 AbortController 来控制 API 请求的取消。在请求时传递 controller.signal 参数,并在组件卸载时或发起新请求时取消未完成的请求。

  • testFetchFunction方法更新: 方法现在接收 controller 作为参数,并在请求配置中使用 signal 选项来绑定请求的取消控制器。

  • 这是以react为例的

  •  useEffect(() => {
    
        testFetchFunction();
     
        return () => {
          if (fenXiControllerRef.current) {
            fenXiControllerRef.current.abort();
          }
        };
      }, [queryParams]);
    
    
    
    const fenXiControllerRef = useRef(null);
    
      const testFetchFunction = async () => {
        if (fenXiControllerRef.current) {
          fenXiControllerRef.current.abort();
        }
    
        const controller = new AbortController();
        fenXiControllerRef.current = controller;
    
         const res = await api.test.getTestInfo(
        {
         param: queryParams.param
        },
        {signal: controller.signal})
      };
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一直在学习的小白~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值