Fetch: отмена
The ability to abort ongoing network requests is essential for creating responsive and efficient web applications. In JavaScript, the AbortController interface
Возможность отмены текущих сетевых запросов необходима для создания отзывчивых и эффективных веб-приложений. В 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?