„Bei erfolgreichem Axios-Aufruf wurde keine entsprechende Meldung angezeigt“

Question

Ich weiß nicht, wie ich die Antwort auf einen erfolgreichen Axios-Anruf erhalten und die Erfolgsmeldung anzeigen kann.

Es gibt eine Schaltfläche namens „Workflow-Reihenfolge ändern“ und diese verfügt über eine OnClick-Funktion.

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

Dies ist die onClick-Funktion. Die Funktion „changeWorkflowOrder“ führt einen Axios-Aufruf aus.

function changeWorkflowOrder() {

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

Ich möchte die erfolgreiche Antwort des Axios-Aufrufs erfassen und, wenn die Antwort des Axios-Aufrufs erfolgreich ist, die Erfolgsmeldung im HTML-Span-Tag anzeigen. Die Meldung darf nur 4 Sekunden lang angezeigt werden. Nach 4 Sekunden muss die Erfolgsmeldung ausgeblendet werden.

Ich habe versucht, das zu erstellen. Dies ist die Funktion „changeWorkflowOrder“, die ich ausprobiert habe.

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);
    });
}

Dieser Code zeigt die Fehlermeldung korrekt an. Aber nach 4 Sekunden wird die Fehlermeldung angezeigt, die Meldung „Bestelländerung erfolgreich“ wird nicht ausgeblendet, ich denke, der Axios-Anrufantworterfassungsteil ist falsch.

Wie kann ich die Antwort eines Axios-Aufrufs erfassen und 4 Sekunden lang eine Erfolgsmeldung in einem HTML-Span-Tag anzeigen?

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请求 */);
}