在道具更改时反应取消 Promise

Question

我有一个采用 visible bool 属性的 React 组件。 React 执行一个触发长运行 Promise 的函数，我需要在 visible 更改时取消 Promise。但是，尝试从外部拒绝 Promise 不会停止执行。

代码的粗略轮廓如下：

<ComponentA visible={visible} />

const ComponentA = ({ visible }) => {
   const [rejectFn, setRejectFn] = useState(() = () => console.log('test');

    useEffect(() => {
        if (visible) {
            ...
        } else {
            setRejectFn();
        }
    }, [visible]);

   const promiseFn = () => (
       new Promise((resolve, reject) => {
            // logic

            const endCallback = (error) => {
                if (error) {
                    reject(error);
                    console.log('error', error);
                } else {
                    resolve(...);
                }
            };

            setRejectFn(() = () => endCallback('exit early'));

            someOtherFn(..., endCallback); // processing file chunk by chunk
       })
   );

   const onDivClick = () => (
      // set some state vars
      promiseFn()
          .then(() => ...)
          .catch(() => ...)
          .finally(() => ...);
   );

   return (
      <div onClick=(onDivClick) />
   );
}

以上代码将触发 rejectFn 并记录 "exit early"，但是 Promise 将继续执行直到完成。

Answer 1

给你:

您无法取消正在进行的承诺请求，但您可以这样做

  const visibleRef = useRef(visible); // using ref to get latest value inside setInterval

  useEffect(() => {
    visibleRef.current = visible;
    console.log("visible", visible);
  }, [visible]); // <--- Set the value of visible whenever it changes

  const promiseFn = () =>
    new Promise((resolve, reject) => {
      // logic

      // Will check visibleRef.current every second , you can reduce the time as your need
      const interval = setInterval(() => {
        if (!visibleRef.current) { 
          reject("Due to Visible false value");
          clearInterval(interval);
        }
      }, 1000); 

      // just to mock the promise event execution
      setTimeout(() => {
        resolve();
        clearInterval(interval);
      }, 5000);
    });

工作演示

请检查控制台，这将帮助您获得演示的理解

在道具更改时反应取消 Promise

React cancel out of Promise on props change

javascript

promise

reactjs

es6-promise

react-hooks