Захват ответов, отличных от 200 OK от Fetch

Я использую встроенную библиотеку выборки, как указано здесь. Кажется, что всякий раз, когда возвращается ответ, отличный от 200 OK, возникает исключение со строковым ответом Uncaught (in promise) TypeError: Failed to fetch.

Был ли способ поймать и перейти к определенным кодам ответа HTTP и при этом просмотреть данные ответа? Например ответ 401?

Я приложил свой код запроса, который я использую в качестве оболочки для выборки.

static request(url, data) {

    let headers = {
        "Authorization": window.localStorage.getItem("Authorization"),
        "Content-Type": "application/json"
    };

    let options = {
        method: "GET",
        headers: headers,
        mode: "no-cors",
        cache: "no-cache",
    };

    if (data) {
        options = {
            method: "POST",
            headers: headers,
            mode: "no-cors",
            cache: "no-cache",
            body: JSON.stringify(data)
        }
    }

    return new Promise(async (resolve, reject) => {

        try {

            let response = await fetch(url, options);
            let jsonResponse = await response.json();
            return resolve(jsonResponse);

        } catch (error) {
            // hashHistory.push("/login");
            return reject(error);
        }

    })

}

http javascript fetch-api ecmascript-2017
person James Marino    schedule 11.07.2017    source источник
comment
Вообще говоря, вам никогда не нужно создавать объект Promise самостоятельно. Вы можете ожидать fetch непосредственно в своей функции request.   -  person Dai    schedule 11.07.2017
comment
Никогда не передавайте async function в new Promise!   -  person Bergi    schedule 11.07.2017
comment
Я думаю, что это основной источник проблемы! Спасибо за обзор кода   -  person James Marino    schedule 11.07.2017

Ответы (2)


arrow_upward
5
arrow_downward

«Точная проверка успешного выполнения fetch() будет включать в себя проверку того, что обещание разрешено, а затем проверку того, что свойство Response.ok имеет значение true. Код будет выглядеть примерно так (https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful):

fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    response.blob().then(function(myBlob) {
      var objectURL = URL.createObjectURL(myBlob);
      myImage.src = objectURL;
    });
  } else {
    console.log('Network response was not ok.');
  }
})
.catch(function(error) {
  console.log('There has been a problem with your fetch operation: ' + error.message);
});

"

person Henrique Oecksler Bertoldi    schedule 11.07.2017

arrow_upward
1
arrow_downward

Вы можете проверить свойство Response Headers .status, .text() прочитать Response. Если ожидается, что Response будет прочитано более одного раза, вы можете использовать .clone()

let request = fetch("/path/to/resource");

request
.then(response => {

    const status = response.headers.get("status");

    console.log(status);

    if (status == 401) {
      // read 401 response
      response.text().then(res = > console.log(res));
      return "404.html"
    }
    if (status == 200) {
      return "200.html"
    }
})
.then(result => console.log(result))
.catch(err => // handle error);
person guest271314    schedule 11.07.2017