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

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

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

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

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

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

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

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

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

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

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


reactjs javascript rest react-router react-lifecycle
person Emily    schedule 27.08.2018    source источник
comment
Я добавил ответ. Дайте мне знать, если это не применимо в вашем случае   -  person Sakhi Mansoor    schedule 27.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

person Sakhi Mansoor    schedule 27.08.2018
comment
Я согласен, что это было бы отличным решением, но начальные значения, полученные в форме на следующей странице, зависят от того, что было опубликовано на предыдущей странице. Некоторая дополнительная логика также выполняется в API. - person Emily; 27.08.2018