"Un appel Axios réussi n'a pas affiché le message correspondant"

Question

Je ne sais pas comment obtenir la réponse d'un appel Axios réussi et afficher le message de réussite.

Il existe un bouton appelé « Modifier l'ordre du flux de travail » et il dispose d'une fonction 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>

Il s'agit de la fonction onClick. La fonction changeWorkflowOrder exécute un appel Axios.

function changeWorkflowOrder() {

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

Je souhaite capturer la réponse réussie de l'appel Axios et si la réponse de l'appel Axios est réussie, afficher le message de réussite dans la balise HTML span. Le message ne doit être affiché que pendant 4 secondes. Après 4 secondes, le message de réussite doit être masqué.

J'ai essayé de créer ça. C'est la fonction changeWorkflowOrder que j'ai essayée.

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

Ce code affiche correctement le message d'erreur. Mais après 4 secondes, le message d'erreur s'affiche, le message "Changement de commande réussi" n'est pas masqué, je pense que la partie capture de réponse à l'appel Axios est incorrecte.

Comment puis-je capturer la réponse d'un appel Axios et afficher un message de réussite pendant 4 secondes dans une balise HTML span.

Answer 1

Je recommande d'abord de créer un client axiospour votre api/webservice :

import axios from 'axios';

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

Ensuite, réécrivez votre fonction onclick et implémentez le délai, reportez-vous à cette Réponse 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请求 */);
}