Как остановить HTTP-запрос, запущенный с помощью Fetch в JavaScript

Как остановить HTTP-запрос, запущенный с помощью Fetch в JavaScript

Как остановить 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-запрос, отправленный на сервер, в браузере пользователя.

Источник

Читайте также

НЕТ КОММЕНТАРИЕВ

Оставить комментарий