Antes do AJAX, você tinha que renderizar novamente uma página da web inteira, mesmo para pequenas atualizações. Mas o AJAX nos deu uma maneira de buscar conteúdo do back-end e atualizar os elementos selecionados da interface do usuário. Isso ajudou os desenvolvedores a melhorar a experiência do usuário e construir plataformas da web maiores e complicadas.

Curso intensivo sobre APIs REST

1 9

Estamos agora na idade de APIs RESTful. Simplificando, uma API REST permite enviar e extrair dados de um armazenamento de dados. Este pode ser o seu banco de dados ou um servidor de terceiros como o API do Twitter.

Existem alguns tipos diferentes de APIs REST. Vejamos aqueles que você usará na maioria dos casos.

  • OBTER– Obtenha dados da API. Por exemplo, obtenha um usuário do Twitter com base em seu nome de usuário.
  • POSTAR– Envie dados para a API. Por exemplo, crie um novo registro de usuário com nome, idade e endereço de e-mail.
  • COLOCAR– Atualizar um registro existente com novos dados. Por exemplo, atualize o endereço de e-mail de um usuário.
  • EXCLUIR– Remova um registro. Por exemplo, exclua um usuário do banco de dados.

Existem três elementos em cada API REST. A solicitação, resposta e cabeçalhos.

Solicitação– Esses são os dados que você envia para a API, como um ID de pedido para buscar os detalhes do pedido.

2 6
Pedido de amostra

Resposta– Quaisquer dados que você receber do servidor após uma solicitação bem-sucedida / falhada.

3 5
Resposta de amostra

Cabeçalhos– Metadados adicionais passados ​​para a API para ajudar o servidor a entender com que tipo de solicitação está lidando, por exemplo “tipo de conteúdo”.

4 2
Cabeçalhos de amostra

A vantagem real de usar uma API REST é que você pode construir uma única camada de API para vários aplicativos trabalharem.

Se você tem um banco de dados que deseja gerenciar usando um aplicativo da web, móvel e desktop, tudo o que você precisa é uma única camada de API REST.

Agora que você sabe como funcionam as APIs REST, vamos ver como podemos consumi-las.

XMLHttpRequest

Antes JSON assumiu o controle do mundo, o formato principal de troca de dados era XML. XMLHttpRequest () é uma função JavaScript que tornou possível buscar dados de APIs que retornaram dados XML.

XMLHttpRequest nos deu a opção de buscar dados XML do back-end sem recarregar a página inteira.

Essa função cresceu desde seus dias iniciais como apenas XML. Agora ele suporta outros formatos de dados como JSON e texto simples.

Vamos escrever uma chamada XMLHttpRequest simples para a API do GitHub para buscar meu perfil.

// function to handle successfunction success() {    var data = JSON.parse(this.responseText); //parse the string to JSON    console.log(data);}// function to handle errorfunction error(err) {    console.log('Request Failed', err); //error details will be in the "err" object}var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequestxhr.onload = success; // call success function if request is successfulxhr.onerror = error;  // call error function if request failedxhr.open('GET', 'https://api.github.com/users/manishmshiva'); // open a GET requestxhr.send(); // send the request to the server.

O código acima irá enviar uma solicitação GET para https://api.github.com/users/manishmshiva para buscar minhas informações do GitHub em JSON. Se a resposta for bem-sucedida, o seguinte JSON será impresso no console:

5 2

Se a solicitação falhar, ele imprimirá esta mensagem de erro no console:

8 1

Fetch API

A API Fetch é uma versão mais simples e fácil de usar de XMLHttpRequest para consumir recursos de forma assíncrona. Fetch permite que você trabalhe com APIs REST com opções adicionais, como armazenamento de dados em cache, leitura de respostas de streaming e muito mais.

A principal diferença é que Fetch funciona com promessas, não com retornos de chamada. Os desenvolvedores de JavaScript têm se afastado dos retornos de chamada após a introdução de promessas.

Para um aplicativo complexo, você pode facilmente adquirir o hábito de escrever callbacks que levam a inferno de retorno.

Com promessas, é fácil escrever e lidar com solicitações assíncronas. Se você é novo em promessas, você pode aprender como eles funcionam aqui.

Esta é a aparência da função que escrevemos anteriormente se você usasse fetch () em vez de XMLHttpRequest:

// GET Request.fetch('https://api.github.com/users/manishmshiva')    // Handle success    .then(response => response.json())  // convert to json    .then(json => console.log(json))    //print data to console    .catch(err => console.log('Request Failed', err)); // Catch errors

O primeiro parâmetro da função Fetch deve ser sempre o URL. Fetch, então, pega um segundo objeto JSON com opções como método, cabeçalhos, corpo da solicitação e assim por diante.

Há uma diferença importante entre o objeto de resposta em XMLHttpRequest e Fetch.

XMLHttpRequest retorna os dados como uma resposta, enquanto o objeto de resposta de Fetch contém informações sobre o próprio objeto de resposta. Isso inclui cabeçalhos, código de status, etc. Chamamos a função “res.json ()” para obter os dados de que precisamos do objeto de resposta.

Outra diferença importante é que a API Fetch não gerará um erro se a solicitação retornar um código de status 400 ou 500. Ele ainda será marcado como uma resposta bem-sucedida e passado para a função ‘então’.

A busca só gera um erro se a própria solicitação for interrompida. Para lidar com 400 e 500 respostas, você pode escrever uma lógica personalizada usando ‘response.status’. A propriedade ‘status’ fornecerá o código de status da resposta retornada.

Ótimo. Agora que você entende como a API Fetch funciona, vamos examinar mais alguns exemplos, como passar dados e trabalhar com cabeçalhos.

Você pode passar cabeçalhos usando a propriedade “cabeçalhos”. Você também pode usar o construtor de cabeçalhos para estruturar melhor seu código. Mas passar um objeto JSON para a propriedade “headers” deve funcionar na maioria dos casos.

fetch('https://api.github.com/users/manishmshiva', {  method: "GET",  headers: {"Content-type": "application/json;charset=UTF-8"}}).then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Passando dados para uma solicitação POST

Para uma solicitação POST, você pode usar a propriedade “body” para passar uma string JSON como entrada. Observe que o corpo da solicitação deve ser uma string JSON, enquanto os cabeçalhos devem ser um objeto JSON.

// data to be sent to the POST requestlet _data = {  title: "foo",  body: "bar",   userId:1}fetch('https://jsonplaceholder.typicode.com/posts', {  method: "POST",  body: JSON.stringify(_data),  headers: {"Content-type": "application/json; charset=UTF-8"}}).then(response => response.json()) .then(json => console.log(json));.catch(err => console.log(err));

A API Fetch ainda está em desenvolvimento ativo. Podemos esperar melhores recursos em um futuro próximo.

No entanto, a maioria dos navegadores oferece suporte ao uso de Fetch em seus aplicativos. O gráfico abaixo deve ajudá-lo a descobrir quais navegadores oferecem suporte na web e em aplicativos móveis.

6 2

Espero que este artigo tenha ajudado você a entender como trabalhar com a API Fetch. Certifique-se de experimentar o Fetch para seu próximo aplicativo da web.

Eu escrevo regularmente sobre aprendizado de máquina, segurança cibernética e DevOps. Você pode se inscrever no meu boletim informativo semanal aqui.