Как остановить HTTP-запрос, запущенный с помощью Fetch в JavaScript
Доброго времени суток! Сегодня мы рассмотрим с Вами как можно остановить HTTP-запрос в JavaScript.
В примере мы будем использовать JavaScript Fetch API.
Код html-страницы
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript Fetch</title>
</head>
<body>
<button id="down_button">Загрузить</button>
<button id="stop_button">Остановить</button>
<script src = "script.js"></script>
</body>
</html>
Скрипт script.js
document.addEventListener("DOMContentLoaded", function() {
// создаем объект класса AbortController, который отвечает за остановку запроса
const controller = new AbortController();
// получаем свойство signal из объекта контроллера
const signal = controller.signal;
// ссылки на кнопки
const down_button = document.getElementById("down_button");
const stop_button = document.getElementById("stop_button");
// при щелчке по кнопке загрузки
down_button.addEventListener("click", () => {
// делаем запрос на сервер, в качестве второго аргумента передаем объект со свойством signal
fetch('https://myrusakov.ru/posts', { signal: signal })
.then(response => response.json())
.then(json => alert(json));
});
// при щелчке на кнопку остановить - посылаем сообщение о необходимости остановки
stop_button.addEventListener("click", () => {
controller.abort();
});
});
Вот таким образом можно остановить HTTP-запрос, отправленный на сервер, в браузере пользователя.
