"Panggilan Axios yang berjaya tidak memaparkan mesej yang sepadan"

Question

Saya tidak tahu bagaimana untuk mendapatkan respons panggilan Axios yang berjaya dan memaparkan mesej kejayaan.

Terdapat butang yang dipanggil "Tukar Pesanan Aliran Kerja" dan ia mempunyai fungsi 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>

Ini ialah fungsi onClick. Fungsi changeWorkflowOrder menjalankan panggilan Axios.

function changeWorkflowOrder() {

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

Saya ingin menangkap respons yang berjaya bagi panggilan Axios dan jika respons panggilan Axios berjaya, paparkan mesej kejayaan dalam teg span HTML. Mesej mesti hanya dipaparkan selama 4 saat. Selepas 4 saat, mesej kejayaan mesti disembunyikan.

Saya cuba mencipta ini. Ini ialah fungsi changeWorkflowOrder yang saya cuba.

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

Kod ini memaparkan mesej ralat dengan betul. Tetapi selepas 4 saat mesej ralat ditunjukkan, mesej "Perubahan pesanan berjaya" tidak disembunyikan, saya rasa bahagian tangkapan respons panggilan Axios tidak betul.

Bagaimana saya boleh menangkap respons panggilan Axios dan memaparkan mesej kejayaan selama 4 saat dalam teg span HTML.

Answer 1

Saya syorkan buat dahulu axios clientuntuk api/perkhidmatan web anda:

import axios from 'axios';

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

Kemudian tulis semula fungsi onclick anda dan laksanakan kelewatan, rujuk ini Jawapan Limpahan Tindanan:

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