2

Olá, Tenho um requisição GET em Jquery, para carregar um página HTML; e caso a página não exista, então exibe no container um <div>erro 404</div.

A requisição em Jquery funciona bem.

Requisição Jquery

const loadHtml = (url, element) => {
    $.get(url, function(response) {
        $(element).html(response);
    }).fail(function() {
        $(element).html('<div>erro 404</div>');
    })
}

Porém eu quero remover o Jquery da aplicação e, neste caso, quero utilizar javascript puro, então pensei em utilizar Promise.

Acontece que quando a página HTML NÃO existe, a mensagem exibida no container, não esta sendo <div>erro 404</div>, e sim a mensagem 404 do servidor.

Podem me ajudar a melhor o código abaixo para que, se a página não existir eu possa exibir o <div>erro 404</div> ?

Promise

const loadHtml = (url, element) => {
    fetch(url, {
        method: 'get' // opcional
    })
    .then(function(response) {
        response.text()
        .then(function(result) {
            console.log(result);
            $(element).html(result);
        })
    })
    .catch(function(err) {
        $(element).html('<div>erro 404</div>');
    });
}

2 Respostas 2

3

A questão nem é o Promise, a questão é você entender o fetch API, entendeu o básico então vai conseguir usar, já que Promise é algo mais geral e "muda o comportamento" (nos parametros recebidos) conforme o local que é aplicado, então pra deixar claro, requisição HTTP não tem haver com promise, no caso do fetch ele recebe a interface Response para uma resposta HTTP e é com isto que você vai obter o erro especifico 404 (lembre-se existem diversos tipos de erros possíveis), no caso pode usar a propriedade Response.status

Exemplo:

fetch(url, {
    method: 'get'
}).then(function(response) {
    if (response.status == 404) {
        ... faz algo ...
    } else if(response.ok) {//Verifica se esta dentro do 2xx. que são de sucesso
        ... faz algo ...
    } else {
        ... outros erros HTTP, faz algo ...
    }
})

Se você quer tratar no catch ai só emitindo um reject, pois status HTTP não são exceptions ou erros ou um throw new Exception, são respostas e o catch captura 'erros' ou 'rejeições', mas para o caso Promise.reject resolve, poderia simplesmente fazer isto:

fetch(url, {
    method: 'get'
}).then(function(response) {
    if (response.ok) {//Verifica se esta dentro do 2xx. que são de sucesso
        ... faz algo ...
    } else {
        return Promise.reject(response); //Envia o response para o catch
    }
}).catch(function (response) {
    if (response.status == 404) {
        ... faz algo ...
    } else {
        ... outros erros HTTP, faz algo ...
    }
});
3
  • Obrigado pela resposta, então resumindo, promise é um retorno do método fetch, que retorna uma response, e daí pra frente poderei fazer as verificações e se eu quiser retornar um json, vou utilizar o método json(), da mesma forma, se eu quiser retornar uma string, posso utilizar o método text(); 6/02/2020 às 13:37
  • @WagnerFillio mais ou menos, promise é algo que pode ser usado em quase tudo do JavaScript, basicamente é um recurso stand-alone, ele pode ser usado até mesmo sozinho, é algo que você pode construir, mas sim, o fetch usa-o internamente para facilitar e com ele você pode trabalhar o catch em caso de esperar obrigatoriamente um json, se não for json você pode fazer semelhante ao que fiz no return Promise.reject(response);, ficando algo como: 6/02/2020 às 13:50
  • fetch(url, { method: 'get' }).then(function(response) { if (response.ok) { return response.json(); } else { return Promise.reject(response); } }).then(function (responseJson) { /*algo aqui*/ }).catch(function (response) { if (response.status == 404) { ... faz algo ... } else { ... outros erros HTTP, faz algo ... } }); ... no /*algo aqui*/ você vai manipular o json que recebeu, porque assim facilita dividindo em diferentes THENs 6/02/2020 às 13:50
3

Você fez errado, primeiro você precisa verificar se a requisição foi ok e após essa verificação utilizar o promisse novamente para resgatar os valores, exemplo:

const elemento = document.getElementById("elemento");
const divError = '<div>erro 404</div>';
const loadHtml = (url, element) => {
    fetch(url, {
        method: 'get' // opcional
    })
    .then(function(response) {
        if (response.ok){ // verifica se houve sucesso
            response.json() // aplicando a chamada novamente e resgatando o resultado
              .then(function(result) {            
                elemento.innerHTML = JSON.stringify(result);
              });
        } else { // a requisição aconteceu algum problema
            elemento.innerHTML = divError
        }        
    })
    .catch(function(err) {
        elemento.innerHTML = divError
    });
}
loadHtml('https://viacep.com.br/ws/01001000/json/', elemento);
<div id="elemento">Carregado ...</div>

Eu faria um pouco diferente:

const elemento = document.getElementById("elemento");
const divError = '<div>erro 404</div>';
const loadHtml = async (url, element) => {
  try {
    const p = await fetch(url, { method: 'get' });
    const r = await p.json();
    elemento.innerHTML = JSON.stringify(r);
  } catch {
     elemento.innerHTML = '<div>erro 404</div>';
  }
}
loadHtml('https://viacep.com.br/ws/01001000/json/', elemento);
<div id="elemento">Carregando ...</div>

Links

2
  • Mas neste caso o retorno está sendo um json, no exemplo que passei eu estou requisitando um página HTML. Exemplo: loadHtml('pages/page.html', elemento) Como seria desta forma ? 6/02/2020 às 12:34
  • @WagnerFillio da mesma forma ... o resultado é diferente mas, a forma de chegar até ele é o mesmo
    – novic
    6/02/2020 às 15:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .