Comment attendre la fin de l'appel de service avant de charger la page suivante dans react router ?

Question

J'ai un problème avec une application comportant quatre formulaires. Chaque page du formulaire effectue un POST lorsque le composant se démonte. Il était nécessaire que chaque fois que l'utilisateur quitte la page, les informations du formulaire soient envoyées, donc je ne peux pas déplacer la logique vers le bouton "SUIVANT" que j'ai sur la page.

Lorsque la page suivante du formulaire se charge, elle doit effectuer un GET. Mon problème est que le POST peut prendre un certain temps, de sorte que le GET est appelé avant le POST.

Comment puis-je attendre la fin de l'appel au service POST avant de diriger l'utilisateur vers la page suivante du formulaire où se produit le GET.

Voici ce que j'ai dans la première page du formulaire. La fonction onSubmit déclenche le routage vers la page suivante, puis, lorsque le composant se démonte, il effectue l'appel de service qui doit être terminé avant de passer à la page suivante.

componentWillUnmount() {
    this.props.postServiceCall();
}

onSubmit = () => {
    routeToNextPage();
};

Sur la page suivante, j'ai le GET, qui se termine avant que mon POST ne soit terminé.

componentDidMount() {
    this.props.getServiceCall();
}

J'utilise le routeur react. Plus précisément le routeur de navigateur. Rappel : Je ne peux pas changer le POST pour qu'il se produise avec le onSubmit. Le POST doit se produire à chaque fois que l'utilisateur quitte la page afin que ses données soient sauvegardées sur le serveur.

Toute idée serait la bienvenue !

Answer 1

Vous devez utiliser stockage local au lieu d'envoyer une demande de réseau. Il est toujours recommandé de stocker des informations partielles dans localStorage pour résoudre les petits problèmes comme dans votre cas. Vous pouvez à tout moment récupérer des informations dans localStorage. De toute façon, les appels ajax sont asynchrones et nous ne pouvons pas être sûrs que la requête précédente a été persistée dans notre base de données.