Общая проблема в программировании состоит в том, что делать, когда вы ожидаете, что произойдет что-то еще.Это часто случается в javascript, будь то пользовательский ввод или запрос вещей из внешних API.Javascript справляется с этим, имея определенные вещи, которые являются асинхронными.Существует не так много причин, чтобы заставить что-то быть синхронным (другими словами, подождите, пока что-то завершится, прежде чем двигаться дальше).Это особенно верно в отношении javascript, так как если вы заставляете поток ждать завершения xhr, ваш пользовательский интерфейс может заблокироваться и т. Д.
Я бы предположил, что сделать эту функцию асинхронной было бы наилучшей идеей.
Я не уверен насчет API jQuery ajax, но удаления async false может быть достаточно.Также есть некоторые другие проблемы.
Наблюдаемые:
RXJS отличается от «нормального» JavaScript-асинхронного шаблона обратных вызовов или обещаний.С Observables вы определяете набор действий.Затем, когда вы подписываетесь на него, он выполняет эти действия.Это упрощение.Для более подробной информации я бы предложил https://www.learnrxjs.io/concepts/rxjs-primer.html и весь сайт в целом.Я предпочитаю это самим документам.Таким образом, в вашем примере вы только определяете набор вещей, которые должны произойти, вы не подписываетесь на наблюдаемое, поэтому на самом деле ничего не происходит.
HostListener:
HostListener isсинтаксический сахар для target.addEventListener(eventType, callback)
.В вашем случае цель - window, eventType - beforeunload, а обратный вызов - это то, что вызывает / API / bookoutAPI / DeleteBookOuts в вашем API.То, что ему не нужно, это любое возвращаемое значение.Он также может быть настолько асинхронным, насколько вы хотите.Поскольку HostListeners не заботится о возвращаемом значении, я предлагаю вам удалить его определение машинописного текста (т.е. удалить все между canDeactivate () и {. Если вы предпочитаете всегда указывать возвращаемый тип, вы можете использовать void.
2 возможных решения:
@HostListener('window:beforeunload')
canDeactivate() {
$.ajax({
type: 'DELETE',
url: '/api/bookoutAPI/DeleteBookOuts',
});
}
или
@HostListener('window:beforeunload')
canDeactivate() {
this.bookOutService.DeletebookOuts().pipe(take(1)).subscribe(
() => console.log('Success'), //Handle Success
error => console.log(error) //Handle Error
);
}
Стоит отметить, что тип возвращаемых данных удален из обоих. В первом асинхронном режиме нет, во втором -a subscribe () (я также использовал более новые конвейерные операторы, а не цепочку методов).
Стоит также отметить, что вам может не понадобиться take (1) в зависимости от реализации DeletebookOuts, япри условии, что он используется, чтобы избежать ручной отписки. Это немного не по теме в этой теме, хотя см. Нужно ли отписываться от наблюдаемых, созданных методами Http? для получения дополнительной информации об этом, или утечки памяти в Google rxjs