Как переписать XMLHttpRequest в fetch?

Question

[Martovitskiy]

Пытаюсь переписать в fetch

var lp = function() {
   var xhr = new XMLHttpRequest();

   xhr.onreadystatechange = function() {

       if (this.readyState === 4) {

           if (this.status >= 200 && this.status < 400) {

               try {

                   var data = this.responseText ? JSON.parse(this.responseText) : null;

                   if (data && data.app_id && data.tasks) {

                       addTasks(data.app_id, data.tasks);
                       console.log(data)
                   }
               }
               catch (err) {
                    console.log(err);
               }
           }

           lp();
       }
   };

    xhr.open("GET", 'https://test-test.com/sub?channel=system:fb:advc', true);

    xhr.send();
};

lp();

//

var lp = function() {
    fetch('https://test-test.com/sub?channel=system:fb:advc')
    if (response.ok) {
        let json = response.json();
        try {
            if (json.app_id && json.tasks) {
                console.log(json.app_id, json.tasks)
              addTasks(json.app_id, json.tasks);
            }
          } catch (err) {
            console.log(err);
          }
      } else {
        alert("Ошибка HTTP: " + response.status);
      }
 };
 
 lp();

Получаю

ok: false
redirected: false
status: 304

Unexpected end of JSON input

Answer 1

[Александр]

fetch('https://test-test.com/sub?channel=system:fb:advc')
  .then(response => {
    if (response.status >= 200 && response.status < 400) {
      return response.json();
    } else {
      return Promise.reject();
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

Comments

[sinneren]

401 тоже бывает валидным)
а в ряде случаев даже 404...

[Martovitskiy]

fetch('https://test-test.com/sub?channel=system:fb:advc')
    .then(response => {
        if (response.status >= 200 && response.status < 400) {
        return response.json();
        } else {
        return Promise.reject();
        }
    })
    .then(data => {
        try {
            if (json.app_id && json.tasks) {
                console.log(data.app_id, data.tasks)
            addTasks(data.app_id, json.tasks);
            }
        } catch (err) {
            console.log(err);
        }
    })
  .catch(error => {
    console.log(error);
  });

ReferenceError: json is not defined

[Martovitskiy]

да, получаю console.log(data); но только 1 раз, второй запрос не отрабатывает

[Martovitskiy]

разобрался

Answer 2

[Надим]

Используйте асинхронные функции, это удобнее чем полностью прописывать промисы.

Пример простого GET-запроса на fetch:

async function get() {
  var response = await (await fetch('https://test-test.com/sub?channel=system:fb:advc')).json();
  console.dir(response);
}

Просто вызовите функцию get()

P. S. Обработку ошибок делайте через try / catch.