Fetch: отмена
Возможность отмены текущих сетевых запросов необходима для создания отзывчивых и эффективных веб-приложений. В JavaScript интерфейс AbortController предоставляет мощный механизм для отмены запросов fetch. В этой статье мы подробно рассмотрим использование AbortController для управления запросами fetch, приводя подробные объяснения и практические примеры для улучшения вашего понимания. Чтобы узнать больше о fetch, обратитесь к нашей предыдущей странице Fetch API.
Введение в AbortController
AbortController является частью Fetch API и позволяет отменять один или несколько запросов fetch. Интегрируя AbortController в ваши запросы fetch, вы можете контролировать время их выполнения, гарантируя, что они не будут продолжаться без необходимости и не будут расходовать ресурсы.
Основное использование AbortController
Чтобы отменить запрос fetch, сначала создайте экземпляр AbortController, а затем передайте его свойство signal в запрос fetch. Вот базовый пример:
В этом примере мы создаем экземпляр AbortController и передаем его signal в запрос fetch. Вызывая controller.abort(), мы можем отменить запрос fetch.
Практический пример: Отмена запроса fetch по действию пользователя
AbortController особенно полезен для отмены запросов fetch на основе взаимодействия с пользователем. Рассмотрим сценарий, в котором пользователь может отменить операцию получения данных, нажав на кнопку:
<body>
<button id="abortButton">Abort Fetch Request</button>
<script>
const controller = new AbortController();
const signal = controller.signal;
document.getElementById('abortButton').addEventListener('click', () => {
controller.abort();
});
fetch('https://httpbin.org/delay/5', { signal })
.then(response => response.json())
.then(data => alert(
'Data is successfully fetched! Refresh the page and try aborting.'
))
.catch(error => {
if (error.name === 'AbortError') {
alert('Fetch request was aborted by the user');
} else {
alert('Fetch error: ' + error.message);
}
});
</script>
</body>В этом примере нажатие кнопки с идентификатором abortButton отменит текущий запрос fetch. Мы использовали тестовую конечную точку, на выполнение которой уходит 5 секунд. Если вы нажмете кнопку до истечения 5 секунд, запрос будет отменен.
Обработка нескольких запросов fetch с помощью AbortController
AbortController может управлять несколькими запросами fetch одновременно. Вы можете использовать один и тот же контроллер для нескольких запросов fetch и отменять их все сразу. При использовании AbortController всегда помните о правильной обработке AbortError и выполнении необходимого очищения.
В этом сценарии метод controller.abort() отменяет все запросы fetch, связанные с одним и тем же сигналом.
Расширенное использование AbortController
Комбинирование AbortController с другими асинхронными операциями
AbortController также можно комбинировать с другими асинхронными операциями. Например, вы можете захотеть отменить запрос fetch при выполнении определенного условия в рамках асинхронного рабочего процесса:
В этом примере запрос fetch отменяется другой асинхронной операцией после указанного тайм-аута. API, который мы вызывали через fetch, является тестовой конечной точкой, отвечающей за 5 секунд, а тайм-аут для отмены запроса установлен на одну секунду.
Заключение
AbortController — это мощный инструмент для управления запросами fetch в JavaScript. Понимая и используя AbortController, вы можете создавать более отзывчивые и эффективные веб-приложения. Мы рассмотрели различные практические применения: от отмены по инициативе пользователя до реализации тайм-аутов запросов и одновременной обработки нескольких запросов fetch. Используя эти техники, вы можете повысить производительность и удобство использования ваших веб-приложений.
Практика
Какова цель передачи свойства signal из AbortController в запрос fetch?