Как мы можем записать пройденные / неудачные результаты проверки URL в консоли?

Question

Я собираю все URL-ссылки со страницы HTML и вызываю функцию для отправки XHR-запроса на все URL-ссылки. Я хотел бы, чтобы консоль входила в список пропущенных и неудачных запросов. Я получил свой результат в некоторой степени, но не доволен способом консольных журналов / ошибок. Может кто-то пожалуйста посоветовать, где мне нужно исправить консольный журнал?

<div id="WebLinks">
  <h2>All Links</h2>
  <a href="https://jsfiddle.net/">Link 1</a><br>
  <a href="https://stackoverflow.com/">Link 2</a><br>
  <a href="https://tellus.com">Link 3</a><br>
  <a href="https://loudop.com">Link 4</a><br>
  <a href="https://www.youtube.com">Link 5</a><br><br>
  <input type="button" id="linkChecker" onclick="linkCheck();" value="linkChecker">
</div>

// Как мне улучшить журналы консоли для пропущенных и неудачных. Также удалите некоторые ошибки консоли;

var linkCheck = function() {
  var arr = [],
    l = document.links;
  for (var i = 0; i < l.length; i++) {
    arr.push(l[i].href);
    console.log(arr[i]);
    urlCheck(arr[i]);
  }

  function urlCheck(arr, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (callback) {
          callback(xhr.status < 400);
        }
      }
    };
    xhr.open('HEAD', arr);
    xhr.send();
  }

  urlCheck(arr, function(exists) {
    console.log('"%s" exists?', arr, exists);
  });

}

JS Fiddle

Answer 1

Это можно сделать с помощью fetch API, используя параметр mode: "no-cors":

window.linkCheck = function() {
  function urlCheck(link) {
    fetch(link, {mode: "no-cors"}).then(
      () => console.log(`${link} is valid`),
      () => console.log(`${link} is invalid`)
    );
  }

  var arr = [],
    l = document.links;
  for (var i = 0; i < l.length; i++) {
    arr.push(l[i].href);
    urlCheck(arr[i]);
  }
};

<div id="WebLinks">
  <h2>All Links</h2>
  <a href="https://jsfiddle.net/">Link 1</a><br>
  <a href="https://stackoverflow.com/">Link 2</a><br>
  <a href="https://tellus.com">Link 3</a><br>
  <a href="https://loudop.com">Link 4</a><br>
  <a href="https://www.youtube.com">Link 5</a><br><br>
  <input type="button" id="linkChecker" onclick="linkCheck();" value="linkChecker">
</div>