Trabalhando com API

Entendendo o funcionamento do protocolo HTTP

Referência extra

HTTP é o protocolo responsável pela comunicação de sites na web. Quando acessamos um site, é esse protocolo que utilizamos. Esse protocolo possui alguns métodos, ou, como também são chamados, verbos.

Os verbos HTTP definem qual ação deve ser realizada e, dependendo do verbo, o servidor pode dar uma resposta diferente.

VERBO HTTP CRUD DESCRIÇÃO
POST CREATE Usado para criar novos recursos
NÃO SEGURO - NÃO IDEMPOTENTE
Fazer dois POST idênticos duplicará o recurso
GET READ Recuperar uma representação de um recurso
SEGURO - IDEMPOTENTE
Várias solicitações idênticas retornam o mesmo resultado
PUT UPDATE Atualizar ou criar um recurso
NÃO SEGURO - IDEMPOTENTE
Várias solicitações idênticas atualizarão o mesmo recurso
DELETE DELETE Usado para excluir um recurso
NÃO SEGURO - IDEMPOTENTE §
Várias solicitações idênticas excluirão o mesmo recurso

Os códigos de status das respostas HTTP indicam se uma requisição HTTP foi corretamente concluída. As respostas são agrupadas em cinco classes:

  1. Respostas de informação (100``199),
  2. Respostas de sucesso (200``299),
  3. Redirecionamentos (300``399)
  4. Erros do cliente (400``499)
  5. Erros do servidor (500``599).

Para ver cada código de Status HTTP: HTTP Status Dog

Consumo da PokeApi utilizando fetch

Para realizarmos o consumo da api utilizando o JavaScript podemos utilizar a função fetch, que tem como retorno a resposta do servidor, para isso podemos seguir como base a seguinte estrutura:

fetch(url) //possui como retorno uma promise de response
    .then(response => //quando tiver como resposta um retorno positivo executa o then 
        response.json() //.json faz a converção do tipo de ReadableStream para json e retorna esse resultado 
    )
    .then(jsonBody => console.log(jsonBody)) //utiliza o return do then anterior como callback, no caso já convertido para json

    .catch(error => console.log(error)) //quando tiver como resposta um erro executa o catch

    .finally(() => console.log('Requisição concluída!')) //independente de ter obtido sucesso ou fracasso podemos executar o finally

A Diferença entre Elements e Web Components

Elements - São as tags HTML utilizadas em um projeto.