Axios请求成功响应捕获及消息定时显示隐藏问题求助

现有一个绑定了changeWorkflowOrder点击事件的按钮，执行Axios POST请求后，成功消息无法正常显示并自动隐藏。相关代码如下：

HTML代码 #

<div style="display: flex">
    <button class="btn btn-info change-workflow" onclick="changeWorkflowOrder()">
        Change Workflow Order
    </button>
    <span style="color: green; margin-left: 5px;" id="alert_msg"> </span>
</div>

初始点击事件函数 #

function changeWorkflowOrder() {
    const response = axios.post(js_site_url + '/sort-detail', $('#sortable').sortable("toArray"), {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
}

尝试修改后的代码（存在问题） #

function changeWorkflowOrder() {
    const response = axios.post(js_site_url + '/sort-detail', $('#sortable').sortable("toArray"), {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    });

    response.then((result) => {
        $("#alert_msg").html(result.data.success ? "Success" : "Order change successfully");

        clearTimeout(timeoutId);

        timeoutId = setTimeout(function() {
            $("#alert_msg").hide();
        }, 4000);
    });
}

当前问题：错误消息可正常显示，但成功消息显示4秒后无法隐藏，且Axios响应捕获逻辑存在问题。

问题分析 #

1. 定时器ID作用域问题：timeoutId未全局声明，每次调用函数时都是局部变量，导致clearTimeout无法清除之前的定时器，多个定时器叠加后隐藏逻辑混乱。
2. 消息显示逻辑缺失：若之前的定时器已隐藏span，直接设置内容不会自动显示，需手动调用show()。
3. 请求数据格式错误：使用multipart/form-data头时，直接传递数组无法被正确解析，需用FormData包装数据。
4. 消息判断逻辑倒置：三元表达式的条件与对应消息不匹配，导致成功状态下显示错误文本。

修正后的完整代码 #

1. 全局声明定时器ID

let timeoutId; // 全局存储定时器ID，确保跨调用可清除

2. 修正后的点击事件函数

function changeWorkflowOrder() {
    // 先清除之前未执行的定时器，避免逻辑冲突
    clearTimeout(timeoutId);

    // 用FormData包装请求数据，适配multipart/form-data格式
    const formData = new FormData();
    const sortedIds = $('#sortable').sortable("toArray");
    formData.append('sort_order', JSON.stringify(sortedIds)); // 后端需对应字段名

    axios.post(js_site_url + '/sort-detail', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
    .then((response) => {
        // 根据后端返回的success状态设置正确的成功消息
        const msg = response.data.success ? "Order change successfully" : "Success";
        $("#alert_msg").html(msg).show(); // 先显示再设置内容

        // 设置4秒后自动隐藏
        timeoutId = setTimeout(() => {
            $("#alert_msg").hide();
        }, 4000);
    })
    .catch((error) => {
        // 统一处理请求失败的情况
        $("#alert_msg").html("Failed to change workflow order").show();
        timeoutId = setTimeout(() => {
            $("#alert_msg").hide();
        }, 4000);
        console.error(error); // 控制台打印错误便于调试
    });
}

关键说明 #

• 全局定时器ID：确保每次调用函数时都能清除之前的定时器，避免多个定时器同时运行导致消息隐藏异常。
• FormData包装：符合multipart/form-data格式要求，确保后端能正确解析请求数据。
• 显式调用show()：解决span被隐藏后无法自动显示的问题。
• 完善错误捕获：通过catch()处理请求失败场景，统一错误消息的显示逻辑。

内容的提问来源于stack exchange，提问作者Pathum Sandeepa