Как дождаться завершения сервисного вызова перед загрузкой следующей страницы в реагирующем маршрутизаторе

Question

У меня проблема с приложением с четырьмя формами. Каждая страница формы выполняет POST, когда компонент отключается. Это было деловое требование, чтобы каждый раз, когда пользователь покидает страницу, информация формы отправлялась по почте, поэтому я не могу переместить логику к кнопке «СЛЕДУЮЩАЯ», которая находится на странице.

Когда загружается следующая страница формы, необходимо выполнить GET. Моя проблема в том, что POST может занять некоторое время, поэтому GET вызывается перед POST.

Как мне дождаться завершения вызова службы POST, прежде чем я направлю пользователя на следующую страницу формы, где происходит GET.

Это то, что у меня есть на первой странице формы. OnSubmit запускает маршрутизацию на следующую страницу, а затем, когда компонент размонтируется, выполняет сервисный вызов, который необходимо завершить, прежде чем он перейдет на следующую страницу.

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

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

На следующей странице у меня есть GET, который завершается до завершения моего POST.

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

Я использую реагирующий маршрутизатор. Конкретно браузерный роутер. Напоминание: я не могу изменить POST, чтобы это произошло с onSubmit. Сообщение должно появляться каждый раз, когда пользователь покидает страницу, поэтому его данные сохраняются на сервере.

Любые идеи помогут!

Answer 1

Вы должны использовать localStorage вместо того, чтобы отправлять сетевой запрос. Всегда рекомендуется хранить частичную информацию в localStorage, чтобы справиться с небольшими предостережениями, такими как ваш случай. Вы можете в любое время получить информацию из localStorage. В любом случае вызовы ajax являются асинхронными, и мы не можем быть уверены, что предыдущий запрос был сохранен в нашей БД.