Как получить данные xhr в javascript

#javascript #xmlhttprequest

Вопрос:

Я новичок в javascript и создал этот скрипт, который запускается при загрузке страницы:

 function checkItem(itemToCheck) {
  console.log(`Checking if ${itemToCheck} is checked`)
  var url = `https://list.s40.repl.co/api/get-status/${itemToCheck}`;

  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);

  xhr.setRequestHeader("Accept", "application/json");

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        console.log(xhr.status);
        console.log(xhr.responseText);
    }};

  xhr.send();
  if (status === 200) {
    console.log("The request worked")
    if (response == `True`) {
      console.log(`${itemToCheck} is true`)
      var checkbox = document.getElementById(`${itemToToggle}-checkbox`)
      //Control the checkbox
    }
  }
}
 

Он никогда не выводит текст «Запрос сработал», и, похоже, это происходит потому, что xhr.status и xhr.responseText пусты за пределами той функции, в которой они находятся.
Я ничего не знаю о javascript и не знаю, как это исправить. Все, что я хочу сделать, это иметь возможность запрашивать данные, а затем что-то с ними делать, если это равно истине. Пожалуйста, помогите

Комментарии:

1. Переместите if (status === 200) { ... } деталь внутрь xhr.onreadystatechange .

2. @WaisKamal Теперь он не запускает ни один из javascript

3. Видите ли вы какие-либо ошибки в консоли?

4. @WaisKamal нет, их нет. Если вы хотите увидеть код для полного веб-сайта, перейдите сюда: replit.com/@s40/List

Ответ №1:

Я понял xhr.status == 0 , а это значит, что запрос не удался. Когда я запускаю запрос через postman, я получаю ошибку SSL (срок действия сертификата истек). Вероятно, именно поэтому запрос не выполняется.

Однако запустить его с fetch помощью не проблема. Таким образом, fetch, похоже, пропускает ошибку SSL. Однако, похоже, нет способа XMLHttpRequest игнорировать эту ошибку SSL.

 fetch(`https://list.s40.repl.co/api/get-status/2`)
  .then(res => res.text())
  .then(console.log)
 

Я советую вам проверить, можете ли вы просто использовать fetch для этой задачи. Только очень старые браузеры не поддерживают это: https://caniuse.com/fetch

Это более высокий уровень и async по своей природе. Обычно при async написании для браузера следует отдавать предпочтение коду, а не синхронному, так как синхронный код быстро блокирует выполнение и замедляет работу приложения браузера или даже приводит к его зависанию.

Комментарии:

1. Я попытался использовать fetch, но, похоже, я, вероятно, допустил ошибку в html, потому что javascript вообще не запускается. Я вставил консоль. журнал, и он даже не запустился

2. Попробуй console.log(checkItem, checkItem()) в <body> оф list.html . Каков результат?