React中调用独立异步函数时的JavaScript闭包处理方法

你当前的实现存在3个明显缺陷，导致取消逻辑失效：

• cancelRequest定义在组件外部，属于模块级全局变量，所有组件实例、所有effect执行周期共享同一个值，很容易被其他逻辑篡改，判断结果完全不可靠
• 仅在请求成功的.then回调中做了取消判断，请求报错的.catch分支、请求未返回就卸载的场景下，后续的dispatch状态更新逻辑没有被拦截，依然会尝试更新已卸载组件的状态
• 每次effect重新执行（比如state.page变化触发下一次请求）时，没有重置cancelRequest的值，第一次请求触发取消后，后续所有请求都会被误拦截。

优先使用标准请求中断能力，从HTTP请求层面取消，同时保证每个effect周期的取消逻辑独立：

推荐方案：AbortController（现代浏览器/axios 0.22+ 原生支持） #

直接在effect内部创建独立的中断控制器，清理函数执行时主动中断请求，同时在所有异步回调分支中判断中断状态，完全拦截卸载后的状态更新：

useEffect(() => {
    // 每个effect周期生成独立控制器，和其他周期/其他组件实例完全隔离
    const abortController = new AbortController();

    if (!url) {
        dispatch({ type: "IDLE" });
        return;
    }

    const getAllTweets = async () => {
        try {
            const response = await axiosConfig.get(
                `${url}?page=${state.page}`,
                { signal: abortController.signal }
            );
            // 已中断则直接返回，不执行任何状态更新
            if (abortController.signal.aborted) return;

            if (state.page !== -1) {
                state.page === 1
                    ? dispatch({ type: "LOADED", payload: response.data.data })
                    : dispatch({
                        type: "LOADED",
                        payload: [...state.tweets, ...response.data.data],
                    });
            }
            // 其余成功业务逻辑
        } catch (err) {
            // 主动中断的请求直接忽略，不处理错误也不更新状态
            if (abortController.signal.aborted) return;
            // 处理真实请求错误
            dispatch({ type: "ERROR", payload: err });
        }
    };

    getAllTweets();

    // 清理函数：组件卸载/下一次effect执行前中断请求
    return () => abortController.abort();
}, [state.page]);

兼容方案：旧版axios CancelToken #

如果使用0.22版本以下的axios，可以用内置的CancelToken实现，逻辑完全一致：

import axios from 'axios';

useEffect(() => {
    const source = axios.CancelToken.source();

    if (!url) {
        dispatch({ type: "IDLE" });
        return;
    }

    const getAllTweets = async () => {
        try {
            const response = await axiosConfig.get(
                `${url}?page=${state.page}`,
                { cancelToken: source.token }
            );
            // 成功逻辑同上方AbortController方案
        } catch (err) {
            if (axios.isCancel(err)) return;
            dispatch({ type: "ERROR", payload: err });
        }
    };

    getAllTweets();

    return () => source.cancel();
}, [state.page]);

兜底方案：局部布尔标记 #

如果受环境限制无法使用上述请求中断能力，也可以用局部布尔变量实现，但注意必须把变量定义在effect内部，且覆盖所有回调分支：

注意：该方案仅阻止状态更新，不会真正中断已发出的HTTP请求，会造成不必要的带宽浪费，仅作为兼容兜底使用

useEffect(() => {
    // 变量定义在effect内部，每个执行周期独立
    let cancelRequest = false;

    if (!url) {
        dispatch({ type: "IDLE" });
        return;
    }

    function getAllTweets() {
        axiosConfig
            .get(`${url}?page=${state.page}`)
            .then((response) => {
                if (cancelRequest) return;
                // 原有成功dispatch逻辑
            })
            .catch(err => {
                if (cancelRequest) return;
                // 原有错误处理逻辑
            })
    }

    getAllTweets();

    return () => {
        cancelRequest = true;
    };
}, [state.page]);

内容的提问来源于stack exchange，提问作者ColstonBod-oy