[MUSIC]
A comunicação entre cliente e servidor nunca é um negócio concluído.
Parafraseando um famoso provérbio,
há muitas aljava entre o cliente e o servidor.
Então, como lidamos com erros quando eles surgem,
quando estamos nos comunicando entre o cliente e o servidor?
Vamos falar sobre isso neste exercício.
Quando o servidor gera uma resposta, ou o cliente HTTP,
ao se comunicar com o servidor, encontra um erro e gera
uma resposta de erro, isso é entregue na forma de resposta de erro HTTP.
Agora, esta resposta, queremos ser capazes de processá-lo e
, em seguida, transformá-lo em uma string de mensagem de resposta, que
pode ser entregue ao cliente para que o cliente possa exibir isso na tela.
Então, para nos permitir fazer isso,
vamos criar um novo serviço chamado processo mensagem HTTP neste, esta é pasta.
Então, para fazer isso, no prompt digite ng,
g service services/processhttpMsg,
e gerar o serviço ProcessHttpMsg.
Agora, uma vez que o serviço é gerado, então vamos em frente e
adicioná-lo ao módulo do aplicativo.
E, em seguida, vamos adicionar um método para o serviço ProcessHttpMsg.
Agora que criamos o serviço ProcessHttpMsg,
vamos em frente e, em seguida, adicioná-lo ao arquivo app.module.ts.
Então, indo para o arquivo app.module.ts,
deixe-me importar o serviço ProcessHttpMsg,
De './services/process-httpmsg.service '.
Assim, uma vez que é importado, então poderemos usá-lo em nosso aplicativo.
Então vamos em frente e adicionar isso em nossos provedores.
Então, entrando em nossos provedores,
deixe-me adicionar o ProcesshttpMsgService aos provedores.
A primeira coisa que faremos é incluir um novo método em
o ProcessHttpMsgService chamado erros de identificador,
que cuidará de erros de manuseio quando surgirem.
E então vamos fazer uso deles nos serviços onde acessamos o servidor.
Para começar, vamos primeiro importar,
ThrowError de, rxjs,
e isso nos ajuda a jogar em erro sempre que isso surgir.
E, em seguida, importamos HTTPERRORResponse de,
angular/common/http.
Em seguida, vamos começar a projetar método handleError, e
isso leva, como um parâmetro, um erro que poderia ser uma resposta,
que é uma resposta de erro do servidor,
ou qualquer outra razão que o erro surge.
Então, dentro deste método HandleError, o que devemos fazer?
Vamos tentar construir uma mensagem que resume o que é o erro.
Então vamos incluir uma nova variável string aqui.
Se error.error for uma instância
de ErrorEvent, portanto, se este for um evento de erro que ocorre,
então o error.error.message conterá informações.
Então vamos definir a mensagem de erro para
error.error.message.
Se esse não for o caso, então isso significa que isso está vindo do lado do servidor,
e assim, nesse caso, a mensagem de erro é construída dizendo igual a backquotes,
anote as backquotes aqui e, em seguida, $ {error.status}.
Então, estamos extraindo as informações de status de lá.
E então, - Error.StatusText,
se o StatusText existir, ou
que será uma string vazia lá.
E então também incluiremos o próprio error.error,
o objeto de erro completo em si, bem ali na string.
E então use isso como nossa mensagem de erro.
Agora, uma vez que temos a mensagem de erro,
então seremos capazes de usar o ThrowerError para
retornar um erro observável para a nossa aplicação.
Então o que isso significa é que isso está lançando um erro neste ponto,
com a mensagem de erro incluída lá.
Portanto, esta cadeia de mensagem de erro é construída com base nas informações
que obtemos aqui, seja porque o lado do servidor respondeu com um erro ou
o erro pode ser de outras razões.
Então, em ambos os casos, vamos construir uma mensagem de erro e, em seguida, retorná-la.
Agora, onde fazemos uso deste erro de identificador?
Agora, dentro de nossos serviços, por exemplo, o arquivo dishservice.ts,
vimos que antes quando dissemos que este HTTP obter, e então nós apenas dissemos mapa,
e, em seguida, assumimos que a resposta é sempre uma resposta positiva.
Mas suponha que sua resposta não seja positiva, e
então ele retorna um erro, então precisamos pegar esse erro.
Para nos ajudar com isso, importamos o operador CatchError de rxjs,
e, em seguida, também importamos o ProcessHttpMsgService
que acabamos de criar anteriormente em
nosso serviço de prato para que possamos usar o método de erro de identificador a partir daí.
Então nós importamos isso do./process-httpmsg.service.
E então, indo para baixo para o construtor,
nós agora injetamos o serviço de mensagem HTTP processo
no construtor, junto com o cliente HTTP.
Para que possamos fazer uso deste serviço,
especialmente o método de erro de identificador do serviço para lidar com os erros
que são retornados pelo nosso cliente HTTP lá.
Agora, uma vez que tenhamos configurado o construtor,
em seguida, para lidar com erro no método getDates para
exemplo, vamos canalizar para o método CatchErrors.
E, em seguida, chamar o método handleError após
this.processhttpMsgService dentro do método CatchError.
Assim, quando o cliente HTTP retorna um erro, então isso será processado e
a mensagem de erro apropriada será extraída.
E, em seguida, ele vai acabar lançando o erro através
o método handleError naquele ponto.
Da mesma forma, vamos fazer o mesmo com os métodos GetDish e
getFeatureDish também.
Agora, quando se trata do método getDish ids,
uma vez que o método getDish ids está fazendo uso do método getDish,.
Portanto, não precisamos chamar explicitamente o handleError porque se surgir algum erro
o método getDistes já terá convertido esse erro em uma string de erro.
Então, só precisamos pegar o erro e, em seguida, retornar o erro de GetDish Ids.
Normalmente, nem chegaríamos a esse ponto se surgir um erro, porque
o método getDistes teria processado o erro adequadamente nesse ponto.
Assim, uma vez que tenhamos configurado o serviço de prato adequadamente,
então seremos capazes de então fazer uso do método CatchError
para lidar com os erros que surgem.
Agora que atualizamos nosso serviço para poder lidar com erros.
Como lidamos com isso dentro do nosso componente?
Assim, dentro de um componente, por exemplo, quando vamos para o componente de menu.
O que percebemos é que quando fazemos a assinatura,
estávamos esperando que os pratos fossem entregues para nós.
Agora, é possível que o instruir dos pratos,
o erro será entregue pelo lance observável e
então isso resulta na mensagem de erro estar disponível para nós.
Então, para lidar com essa situação, vou introduzir uma nova variável
chamada errMess no componente de menu que é do tipo string.
E, em seguida, o próprio método de assinatura fornece uma maneira de lidar com erros.
Então, o método de assinatura, agora temos apenas especificado uma função aqui.
Também podemos especificar uma segunda função que será
ser chamado quando o resultado do erro.
Então, neste caso, eu posso fornecer uma segunda função de erro dizendo,
errMess, que é o valor retornado em
quando o lançamento observável é feito pelo DishService.
Então, neste caso, eu diria This.errMess = ErrMess, e é isso.
Então aqui o que acontece é que quando o
observável é retornado pelo DishService é um Valor,
então isso seria tratado pela primeira parte.
Se o observável for retornado com o lance observável,
então esta função será executada.
E nesta função, estamos pegando a mensagem de erro e
, em seguida, capturando essa mensagem de erro nesta string errMess que temos aqui.
Então, agora temos a mensagem de erro disponível para nós, então
podemos exibir essa mensagem de erro na visualização deste componente de menu.
Então, como podemos exibir isso na visualização de componentes do menu?
Então, indo para o arquivo de modelo de componentes do menu, aqui vemos que se os pratos não é nulo,
então estamos exibindo o menu com todos os pratos.
Se os pratos são nulos, então este girador está sendo exibido lá.
Agora, vamos adicionar em mais um aqui,
mesmo se o errMess que temos,
a variável, não é nulo, então também
o spinner deve ser escondido e, em seguida,
finalmente, adicionar mais um div com um nGIF.
Então o que isso faz é que este último mergulho será exibido em
caso haja um erro, ea mensagem de erro.
string errMess está configurada para a mensagem de erro.
Então, nesse caso, vamos simplesmente dizer erro h2,
e então eu vou apenas exibir essa string como,
Uma string dentro da vista lá, é isso.
Você pode fazer uma maneira mais elaborada de exibir a mensagem de erro se assim o desejar
.
Mas tudo o que eu vou fazer é se houver um erro,
Eu vou simplesmente mostrar erro na tela e, em seguida, exibir um errMess.
Você pode até mesmo estilizar alterando a cor para vermelho e
assim por diante, mas eu vou deixá-lo assim lá.
Então, com isso, vamos acabar exibindo a mensagem de erro na exibição aqui.
O mesmo procedimento também pode ser usado com o componente prato e
também o componente doméstico onde estamos acessando o serviço de prato.
Então, indo para o componente prato, vou fazer exatamente a mesma coisa,
assim dentro do componente prato eu vou incluir o, ErrMess aqui.
E então aqui dentro da assinatura,
aqui é onde estamos recebendo o valor do prato.
Então, a primeira parte,
o que já incluímos será chamado se o observável retorna um valor.
Mas se ele não retornar um valor, então precisamos lidar com a mensagem de erro.
E vamos usar exatamente a mesma função de mensagem de erro
que definimos anteriormente no componente de menu.
Então, vamos dizer que this.errmess
= Ermess aqui.
É isso, então meu componente prato está atualizado.
Então eu preciso atualizar o arquivo de modelo do componente prato.
Então, indo para o arquivo de modelo,
vemos que vamos estar exibindo o prato se o prato não é nulo.
E, em seguida, abaixo aqui, estamos lidando com a situação
onde vamos mostrar o girador se o prato é nulo.
Então deixe-me adicionar também, se a mensagem de erro não é nula então eu deveria
estar exibindo mensagem de erro em vez do prato aqui, certo?
Então, deixe-me ir em frente e
copiar o código do componente menu.
Eu vou usar exatamente o mesmo código para
o arquivo de modelo de componentes detalhe prato também.
Então, ali mesmo.
Deixe-me ir em frente e inserir esse código aqui.
Então, vemos que se errMess não for nulo,
então esse erro será exibido na exibição lá.
Agora a mesma coisa,
indo para o componente de casa precisamos passar pelo mesmo procedimento.
Agora dentro do componente de casa, é claro, temos prato, promoção e líder.
Então eu vou definir separado, Strings para
cada um deles porque o erro poderia surgir de qualquer um dos três.
Agora só estamos lidando com prato sendo buscado do lado do servidor.
Os dois restantes espero que você faça isso como parte do, Atribuição final.
Então vamos, eu vou dizer string errmess prato e, em seguida, ir para baixo para o código aqui.
E no código aqui,
vamos simplesmente dizer errmess.
Este prato errmess = qualquer
errmess, é isso.
Da mesma forma, atualize os arquivos de modelo de componentes domésticos.
E indo para o arquivo de modelo de componentes domésticos,
vemos que temos o compartimento de prato exibido lá,
então agora para este eu devo dizer ou prato errMess.
E então, abaixo aqui, eu vou incluir o código
que eu copiei do componente de menu, e
então eu atualizá-lo para o prato errMess aqui.
E também, atualize isso para DisErrMess aqui, é isso.
Vamos salvar as alterações.
Indo para o navegador, você vê que tudo funciona exatamente como antes.
A casa, o componente do menu e também o componente de detalhe do prato sem qualquer problema.
Agora a questão é, como causamos erros?
Para causar erros, uma maneira possível de lidar com o problema é ir e
buscar uma informação inexistente do servidor.
Deixe-me ir para o serviço de pratos e, em seguida, causar
meu primeiro problema no DishService aqui.
Então, para o prato em destaque em vez de pratos, deixe-me cometer um erro e
dizer pratos e, em seguida, salvar a mudança.
Obviamente isso significa que este url não existe.
Então, o que acontecerá se ele acessar o servidor?
Indo para o navegador quando agora rolamos,
você vê que o prato não está sendo exibido aqui.
Diz aqui Erro 404 não encontrado.
Isto é porque estamos tentando acessar a informação do prato em
os disnees URL que não existe no lado do servidor.
Então você vê como a mensagem de erro está sendo exibida aqui.
Claro, você pode ser um pouco mais chique e fazer mais trabalho em torno disso e
, em seguida, exibir a mensagem de erro de uma maneira mais significativa.
Mas o princípio básico é destacado aqui dizendo que você
pode mostrar uma mensagem de erro se algo não for executado corretamente
quando você estiver tentando acessar informações do lado do servidor.
Claro, então este é um erro criado artificialmente no meu aplicativo.
Para causar mais um tipo de erro, fui para a janela do meu terminal e
, em seguida, desligar o servidor para ver o que o meu aplicativo Angular fará neste caso.
Então, depois de desligar o servidor,
vamos ver o que o componente home exibirá em sua exibição.
Então, indo para o componente home, agora vemos que porque meu aplicativo Angular
não é capaz de acessar o servidor, ele causou um erro novamente.
E então ele mostra essa string lá para indicar que ocorreu algum erro.
Claro, esta é uma string enigmática,
não transmite nada significativo sobre qual é a fonte do erro.
Mas isso é tudo que conseguimos tentando acessar o servidor neste aplicativo.
Mesma coisa, se eu for para o menu, você verá o mesmo tipo de coisa sendo
exibido, porque o servidor não está disponível, e assim
a informação do prato não pode ser obtida do servidor.
Com isso, completamos este exercício.
Neste exercício, aprendemos como lidar com os erros
que surgem durante a comunicação do servidor cliente em nosso aplicativo Angular.
Este é um bom momento para você fazer um commit git com a mensagem http parte dois.
[MÚSICA]