"成功的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请求 */);
}