Используйте fetch (), прочитайте тело ответа из кодов состояния, отличных от HTTP OK, и поймайте исключение

Question

Я читал о fetch() и о том, как перехватить и распечатать читаемое сообщение об ошибке с сервера.В идеале я хотел бы выдать ошибку, которая всегда заканчивается на Catch 2 в моем примере ниже, и что console.log(`OK: ${data}`); не запускается, если есть ошибка.Я могу смягчить console.log(`OK: ${data}`);, запустив then непосредственно на response.json();, но я хотел бы знать правильный способ достижения этого.

https://stackoverflow.com/a/44576265/3850405

https://developers.google.com/web/updates/2015/03/introduction-to-fetch

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

C #:

[HttpGet, Route("api/specific/catalog/test")]
public async Task<IHttpActionResult> Test()
{
    return InternalServerError(new Exception("My Exception"));
}

[HttpGet, Route("api/specific/catalog/test2")]
public async Task<IHttpActionResult> Test2()
{
    return Ok("My OK Message");
}

Машинопись:

fetch('api/specific/catalog/test2')
    .then(response => {
        if (!response.ok) {
            response.text().then(text => {
                throw new Error(`Request rejected with status ${response.status} and message ${text}`);
            })
            .catch(error =>
                console.log(`Catch 1: ${error}`)
            );
        }
        else {
            return response.json();
        }
    })
    .then(data => {
        console.log(`OK: ${data}`);
    })
    .catch(error =>
        console.log(`Catch 2: ${error}`)
    );

ОК:

Исключение:

Я думаю, я мог бы сделать что-то вроде этого, чтобы перехватить все ошибки, но это кажется странным:

fetch('api/specific/catalog/test')
    .then(response => {
        if (!response.ok) {
            response.text().then(text => {
                throw new Error(`Request rejected with status ${response.status} and message ${text}`);
            })
            .catch(error =>
                console.log(`Catch: ${error}`)
            );
        }
        else {
            return response.json().then(data => {
                console.log(`OK: ${data}`);
            })
            .catch(error =>
                console.log(`Catch 2: ${error}`)
            );
        }
    })
    .catch(error =>
        console.log(`Catch 3: ${error}`)
    );

Answer 1

Проблема в том, что вы глотаете ошибку внутри себя, также вам не нужны множественные уловы, вам нужна только одна в конце, например:

fetch('api/specific/catalog/test')
    .then(response => {
        if (!response.ok) {
            return response.text().then(text => {
                throw new Error(`Request rejected with status ${response.status} and message ${text}`);
            })
        }
        else {
            return response.json()
        }
    })
    .then(data => {
        console.log(`OK: ${data}`);
    })
    .catch(error =>
        console.log(`Catch 3: ${error}`)
    );