examples/abort-controller/index.html - v1.x - githubmirror/axios

examples/abort-controller/index.html
137 строк5 KB
Jay
feat: implement prettier and fix all issues (#7385)
14 фев 2026, 17:59
14 фев 2026, 17:59ef3711d
<!doctype html>
<html>

<head>
  <title>axios - abort controller example</title>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <style>
    .status {
      margin-top: 10px;
    }
  </style>
</head>

<body class="container">
  <h1>axios.AbortController</h1>

  <div class="row" style="margin-top: 20px;">
    <div class="col-md-12">
      <h3>1. Single Request Cancellation</h3>
      <p>Click "Start Request" to begin a 3-second request. Click "Cancel Request" to abort it.</p>
      <button id="startBtn" class="btn btn-primary">Start Request</button>
      <button id="cancelBtn" class="btn btn-danger" disabled>Cancel Request</button>
      <div id="singleStatus" class="status"></div>
    </div>
  </div>

  <hr />

  <div class="row" style="margin-top: 20px;">
    <div class="col-md-12">
      <h3>2. Search-as-you-type (Race Condition Handling)</h3>
      <p>Type quickly. Previous pending requests will be cancelled automatically.</p>
      <div class="form-group">
        <input type="text" id="searchInput" class="form-control" placeholder="Type to search...">
      </div>
      <div id="searchStatus" class="status"></div>
      <ul id="searchLog" class="list-group" style="margin-top: 10px; max-height: 200px; overflow-y: auto;"></ul>
    </div>
  </div>

  <script src="/axios.min.js"></script>
  <script>
    // -----------------------------------------------------------------------
    // 1. Single Request Cancellation
    // -----------------------------------------------------------------------
    const startBtn = document.getElementById('startBtn');
    const cancelBtn = document.getElementById('cancelBtn');
    const singleStatus = document.getElementById('singleStatus');

    let controller;

    startBtn.onclick = function () {
      // Create a new AbortController instance for this request
      controller = new AbortController();

      startBtn.disabled = true;
      cancelBtn.disabled = false;
      singleStatus.innerHTML = '<span class="text-info">Request pending... (3s delay)</span>';

      axios.get('/abort-controller/server?delay=3000', {
        signal: controller.signal
      })
        .then(function (response) {
          singleStatus.innerHTML = '<span class="text-success">' + response.data.message + '</span>';
        })
        .catch(function (err) {
          if (axios.isCancel(err)) {
            singleStatus.innerHTML = '<span class="text-warning">Request canceled: ' + err.message + '</span>';
          } else {
            singleStatus.innerHTML = '<span class="text-danger">Error: ' + err.message + '</span>';
          }
        })
        .finally(function () {
          startBtn.disabled = false;
          cancelBtn.disabled = true;
          controller = null;
        });
    };

    cancelBtn.onclick = function () {
      if (controller) {
        // Abort the request
        controller.abort();
      }
    };


    // -----------------------------------------------------------------------
    // 2. Search-as-you-type
    // -----------------------------------------------------------------------
    const searchInput = document.getElementById('searchInput');
    const searchStatus = document.getElementById('searchStatus');
    const searchLog = document.getElementById('searchLog');

    let searchController;

    searchInput.addEventListener('input', function (e) {
      const query = e.target.value;

      if (searchController) {
        // Cancel the previous request
        searchController.abort();
      }

      // Create a new controller for the new request
      searchController = new AbortController();

      log('New search for: "' + query + '"');
      searchStatus.innerHTML = '<span class="text-info">Searching...</span>';

      axios.get('/abort-controller/server?delay=1000', {
        signal: searchController.signal
      })
        .then(function (response) {
          searchStatus.innerHTML = '<span class="text-success">Result for "' + query + '": ' + response.data.message + '</span>';
          log('Success: ' + query);
        })
        .catch(function (err) {
          if (axios.isCancel(err)) {
            log('Cancelled: ' + query);
          } else {
            searchStatus.innerHTML = '<span class="text-danger">Error: ' + err.message + '</span>';
            log('Error: ' + query);
          }
        });
    });

    function log(msg) {
      const li = document.createElement('li');
      li.className = 'list-group-item py-1';
      li.textContent = new Date().toLocaleTimeString() + ' - ' + msg;
      searchLog.prepend(li);
    }
  </script>
</body>

</html>