Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Obter o status da resposta com fetch

Olá, Estou a usar o fetch com async await para buscar os dados. Mas não consigo obter o status da resposta. O meu código:

const obterPacientesBtn = document.querySelector(".obter-pacientes-btn");
obterPacientesBtn.addEventListener("click", obterPacientes);

async function obterPacientes() {
    const url = "https://api-pacientes.herokuapp.com/pacientesss";
    const options = {
        method: 'GET',
        mode: 'cors',
        headers: {
            "content-type": "application/json;charset=utf-8",
        },
    }

    try {
        let response = await fetch(url, options);
        console.log(response.status);
        let pacientes = await response.json();
        mostrarPacientesObtidosBD(pacientes);
    }catch(error) {
        console.log(error);
    }
}

function mostrarPacientesObtidosBD(pacientes) {
    pacientes.forEach(paciente => {
        mostrarPaciente(paciente);
    });
}

Na consola tenho:

index.html#:1 Access to fetch at 'https://api-pacientes.herokuapp.com/pacientesss' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. fetch.js:15 GET https://api-pacientes.herokuapp.com/pacientesss net::ERR_FAILED obterPacientes @ fetch.js:15 fetch.js:20 TypeError: Failed to fetch

Como faço para obter o status?

Obrigado

3 respostas

Olá, André, tudo bem?

Ao que me parece, você não colocou a URL correta de volta! A URL correta seria https://api-pacientes.herokuapp.com/pacientes em vez de https://api-pacientes.herokuapp.com/pacientesss. Testei aqui e funcionou normalmente.

Espero ter ajudado! Qualquer dúvida estaremos aqui para responder. Bons estudos!

Olá,

A ideia era apanhar o erro no status, por ter a URL errada. Não é possivel?

Cumprimentos

solução!

Olá novamente, André!

Bem, eu estava estudando seu caso e o problema está no Header da requisição. Quando há um erro com a requisição (nesse caso a URL que não existe), o content-type identificado pela requisição não é o que você especificou ("application/json;charset=utf-8), e sim text/html; charset=utf-8.

Do momento que o tipo do conteúdo requisitado não é o que você especificou, o código joga o erro GET https://api-pacientes.herokuapp.com/pacientesss net::ERR_FAILED e o fluxo do código é interrompido, e não está alcançando o console.log(response.status) logo em seguida.

Uma solução é simplesmente tirar a opção headers do seu options, assim:

const options = {
        method: 'GET',
        mode: 'cors',
    }

Você também pode conferir o tipo de conteúdo logo após o fetch, assim:

        let response = await fetch(url, options);
        var contentType = response.headers.get("content-type");
        console.log(contentType);
        console.log(response.status);

Caso a URL esteja errada, no console deverá aparecer o seguinte:

Print do console

Realmente, quando a requisição falha, o content-type é text/html; charset=utf-8. Mas agora como isso não está especificado no headers, o código está preparado para essa falha de requisição e é possível ler o status da resposta!

Você pode ler um pouco mais sobre headers aqui, há um exemplo onde você pode conferir se a requisição realmente retornou dados do tipo JSON.

Espero ter ajudado! Qualquer dúvida estaremos aqui. Bons estudos! :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software