"成功的Axios调用未显示相应的消息"

Question

我不知道如何获取Axios调用成功的响应并显示成功消息。

有一个名为"Change Workflow Order"的按钮，它有一个onClick函数。

<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>

这是onClick函数。changeWorkflowOrder函数运行一个Axios调用。

function changeWorkflowOrder() {

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

我想捕获Axios调用的成功响应，如果Axios调用的响应成功，则在HTML span标签中显示成功消息。消息必须只显示4秒。4秒后，成功消息必须隐藏。

我尝试创建这个。这是我尝试的changeWorkflowOrder函数。

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秒后显示错误消息后，"Order change successfully"消息没有隐藏，我认为Axios调用响应捕获部分不正确。

我如何捕获Axios调用的响应，并在HTML span标签中显示4秒的成功消息。

Answer 1

我建议首先创建一个axios客户端用于你的api/webservice：

import axios from 'axios';

export const myApiClient = axios.create({
  baseURL: '...' /* 在你的情况下，这将是js_site_url */,
  headers: {
    'Content-Type': 'multipart/form-data' /* 这当然可以在任何特定实例调用此客户端时被覆盖 */
  }
});

然后重写你的onclick函数，并实现延迟，参考这个Stack Overflow回答：

import {myApiClient} from '...'; /* 如果你决定将其存储在单独的文件中，请导入你的客户端 */

const delay = ms => new Promise(res => setTimeout(res, ms));

async function changeWorkflowOrder() {
    const myPostData = $('#sortable').sortable("toArray");
    return await myApiClient.post('/sort-workflow-detail-manage', myPostData)
        .then(await res => {
            const alertMsg = res.data?.success ? '成功' : '成功更改顺序';
            $("#alert_msg").html(alertMsg);
            await delay(4000).then(_ => $("#alert_msg").hide());
        })
        .catch(err => /* 在这里处理失败的api请求 */);
}