Как решить проблему передачи данных в XHR с асинхронным вызовом?

Для решения проблемы передачи данных в XHR с асинхронным вызовом можно использовать, например, следующие подходы:

• Использование механизма, который позволяет вызывать функцию после возвращения запроса. qna.habr.com Для этого можно применять promise или callback. qna.habr.com
• Использование таймаута. developer.mozilla.org Это поможет предотвратить зависание кода в ожидании завершения чтения. developer.mozilla.org Для этого нужно установить значение свойства timeout объекта XMLHttpRequest. developer.mozilla.org
• Использование CORS или JSONP. sky.pro Эти способы позволяют получать данные с внешних источников. sky.pro
• Применение fetch() API. developer.mozilla.org В некоторых случаях синхронное использование XMLHttpRequest невозможно, например, во время событий unload, beforeunload и pagehide. developer.mozilla.org В таких ситуациях можно использовать fetch() с флагом keepalive. developer.mozilla.org
• Использование navigator.sendBeacon() API. developer.mozilla.org С его помощью данные будут передаваться асинхронно на веб-сервер, когда у пользовательского агента появится такая возможность. developer.mozilla.org

Асинхронные запросы не блокируют загрузку страницы и позволяют пользователю продолжать взаимодействие с веб-сайтом, пока данные загружаются в фоновом режиме. sky.pro