Je développe une application Web où j'utilise Axios.get Demandes. Puisque Axios est asynchrone, je fais une fonction asynchrone et un Await Axios.All: Ça fonctionne parfaitement mais MyRequest prend un certain temps pour être exécuté et je voudrais alerter l'utilisateur si Il rafraîchit ou quitte la page lorsque la demande Axios est en traitement. Comment puis-je continuer? Merci pour vos réponses futures
3 Réponses :
Vous pouvez utiliser la fenêtre.EnbeForeRunloadLoad fonction pour avoir une fenêtre de confirmation lorsque l'utilisateur a cliqué sur rafraîchir / fermer / quitter le navigateur. Ensuite, supprimez simplement l'écoute une fois que Axios est terminé. < / p>
Bonjour, je connais cette solution mais est-il possible d'appeler cette fonction uniquement si la demande Axios est en train de traiter, je voudrais définir un booléen à true au début de la demande et si la demande est terminée, définissez-la sur FAUX. Donc, s'il rafraîchit et boolean === True: Alert l'utilisateur. C'est possible? Merci
Vous pouvez utiliser une expédition Async. Vous devez définir un état pour que l'application sache qu'elle subit un appel Axios et allumez l'auditeur pour ONBEForEunload. Et puis simplement l'enlever une fois que Axios Call est terminé. Vous pouvez ajouter et supprimer l'écouteur d'événements par window.addeventlistener and window.removeeventlistener, respectivement.
De cette façon, vous obtiendrez Actualiser code> événement. if (window.performance) {
if (performance.navigation.type == 1) {
alert( "Reload page" );
} else {
alert( "Not reloaded");
}
}
Vous pouvez profiter de window.onbeforeunload code>, tandis que vous ne pouvez pas empêcher totalement un utilisateur de rafraîchir, vous pouvez notifier qu'une requête est en attente: window.onbeforeunload = function() {
return "A XHR request is pending, are you sure you want to leave ?";
}
Bonjour, je connais cette solution mais est-il possible d'appeler cette fonction uniquement si la demande Axios est en train de traiter, je voudrais définir un booléen à true au début de la demande et si la demande est terminée, définissez-la sur FAUX. Donc, s'il rafraîchit et boolean === True: Alert l'utilisateur. C'est possible? Merci
Au lieu de définir et de désautover un drapeau BOOL, ajoutez et supprimez l'auditeur pour obtenir le résultat souhaité
Merci pour votre réponse, comment procédez-vous pour ajouter ou supprimer un auditeur?
Avec Window.Removelistener, mais vous devez nommer votre fonction: développeur .mozilla.org / fr-US / Docs / Web / API / EventTarget / ...
Comme indiqué dans les réponses, il n'y a pas de moyen fiable d'empêcher un utilisateur de quitter la page. Vous devriez plutôt essayer de concevoir votre application de manière à ne pas compter sur le client de remplir une demande. Il est généralement plus gênant que utile pour que l'utilisateur empêche de naviguer dans une page et je considérerais cela une mauvaise pratique de l'UI de le faire. En fait, il pourrait y avoir beaucoup d'autres raisons une demande en attente échoue encore moins sous votre contrôle.
En fait, dès que l'URL s'appelle Axios, elle est exécutée, mais pour l'expérience utilisateur, je voudrais les alerter s'ils se rechargent pendant le processus car lorsque le processus est terminé, l'affichage des données sera mise à jour. S'ils rafraîchissent parce qu'ils ne savent pas ce qui se passe et cliquez à nouveau sur le bouton, cela pourrait envoyer une autre demande et spamez mon backend. J'ai mis en œuvre une barre de chargement, mais j'ai peur de l'utilisateur qui ne se souciait même pas de ce bar et de rafraîchir sans attendre qu'il soit complet
Bien à mon avis, il s'agit de plusieurs problèmes non liés pouvant être résolus différemment. Une chose est spamming votre backend si votre application est effectuée une erreur de programmation et si l'utilisateur est effectué par l'utilisateur est un problème d'étranglement ou de permission. Vous devez plutôt désactiver le bouton sur un nouveau rendu et interdire cette commande sur votre serveur s'il existe un processus de mise à jour des données fonctionnant ou tout ce qui se passe. De cette façon, vous empêchez l'utilisateur de "spamer" de manière accidentelle votre backend en premier lieu. Les tâches lourdes de calcul sur le backend idéalement doivent également être fabriquées par ASYNC ne bloquant pas de réponse.
Mais ces étapes nécessitent certes un peu de travail afin que cela puisse être avancé en fonction du budget de temps. Je voulais juste signaler de meilleures solutions.
Merci beaucoup pour vos réponses, je les considérerai parce que je suis d'accord avec vous, mon design est peut-être pas bien conçu pour ce cas!