API REST para iniciantes: Como enviar e receber dados com Javascript

As APIs REST (Representational State Transfer) desempenham um papel fundamental no desenvolvimento de aplicativos web modernos. Elas permitem que desenvolvedores enviem e recebam dados de servidores externos, possibilitando a criação de aplicativos dinâmicos e interativos.

Neste artigo, veja a ligação entre o Javascript e a API Rest, e aprenda como realizar a interação entre elas.

Leiam também:

• Como criar sua primeira interface web com Bootstrap para iniciantes
• Domine o Git e GitHub: Controle de versão para iniciados
• Aprenda Python do zero em 2024: Guia completo para iniciantes

Pré-requisitos

Antes de começarmos, vamos revisar alguns conceitos básicos. Para seguir este artigo, você precisa ter um conhecimento básico de JavaScript, bem como de HTML e CSS para criar a interface do seu aplicativo web. Além disso, você precisará de um editor de código e um navegador web para testar seu aplicativo.

O que é uma API?

Antes de mergulharmos nas APIs REST, vamos entender o que é uma API em geral. API significa Interface de Programação de Aplicativos e é um conjunto de regras e protocolos que permitem que diferentes softwares se comuniquem entre si. Em termos simples, uma API é como um contrato que define como dois aplicativos devem interagir.

Existem diferentes tipos de APIs, mas as APIs REST são uma das mais populares e amplamente utilizadas atualmente. Elas seguem um conjunto de regras e princípios que tornam a comunicação entre aplicativos mais eficiente e organizada.

O que é uma API REST?

Uma API REST é uma API que segue os princípios do REST. O REST é um conjunto de diretrizes que define como os dados devem ser transferidos e armazenados em uma arquitetura de aplicativo distribuído. As APIs REST são projetadas para serem simples, escaláveis e fáceis de usar.

Uma API REST é composta por endpoints, que são URLs específicas que representam recursos ou ações em um servidor. Por exemplo, um endpoint pode representar um usuário em um aplicativo web ou uma ação como criar um novo usuário. Veja abaixo como criar API Rest.

API Rest tutorial: Como fazer uma requisição usando JavaScript

Agora que entendemos o básico sobre APIs REST, vamos aprender como fazer uma requisição usando JavaScript. Existem várias maneiras de fazer isso, mas vamos nos concentrar nas principais opções: o objeto XMLHttpRequest e a função fetch.

XMLHttpRequest

O objeto XMLHttpRequest é uma API nativa do JavaScript que permite fazer requisições HTTP assíncronas. Ele fornece um conjunto de métodos e propriedades que facilitam o envio e o recebimento de dados de um servidor.

Para fazer uma requisição usando o objeto XMLHttpRequest, você precisa criar uma instância dele e especificar o método HTTP desejado e a URL do endpoint. Em seguida, você pode usar os métodos open e send para enviar e receber dados com api.

Veja um exemplo de como fazer uma requisição GET usando o objeto XMLHttpRequest:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.exemplo.com/usuarios', true);
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    const resposta = JSON.parse(xhr.responseText);
    console.log(resposta);
  } else {
    console.error('Erro na requisição:', xhr.status);
  }
};

Neste exemplo, estamos fazendo uma requisição GET para a URL 'https://api.exemplo.com/usuarios'. Se a requisição for bem-sucedida (status 200), a resposta é convertida de JSON para um objeto JavaScript usando o método JSON.parse e exibida no console. Caso contrário, um erro é exibido.

Fetch

A função fetch é uma maneira mais moderna e simplificada de fazer requisições com JavaScript. Ela retorna uma Promise que resolve para a resposta da requisição.

Veja um exemplo de como fazer uma requisição GET usando a função fetch:

fetch('https://api.exemplo.com/usuarios')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Erro na requisição:', response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

Neste exemplo, estamos fazendo uma requisição GET para a URL 'https://api.exemplo.com/usuarios'. Se a requisição for bem-sucedida (status 200), a resposta é convertida de JSON para um objeto JavaScript usando o método json e exibida no console. Caso contrário, um erro é lançado e exibido.

Como lidar com as respostas da API REST

Quando você faz uma requisição para uma API REST, você sempre recebe uma resposta. Essa resposta pode conter dados, informações sobre o status da requisição e outros detalhes.

Existem diferentes códigos de status HTTP que indicam o resultado da requisição. Os códigos de status de sucesso começam com 2 (por exemplo, 200 para OK), enquanto os códigos de erro começam com 4 ou 5 (por exemplo, 404 para Not Found).

Para lidar com as respostas da API, você pode usar os métodos then e catch nas Promises retornadas pelo fetch. No bloco then, você pode verificar o status da resposta e obter os dados usando o método json. No bloco catch, você pode tratar erros de requisição.

Veja um exemplo de como lidar com as respostas da API usando a função fetch:

fetch('https://api.exemplo.com/usuarios')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Erro na requisição:', response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

Neste exemplo, estamos verificando se a resposta da requisição foi bem-sucedida usando a propriedade ok do objeto response. Se for bem-sucedida, os dados são convertidos para um objeto JavaScript usando o método json e exibidos no console. Caso contrário, um erro é lançado e exibido.

Conclusão

Neste artigo, exploramos as APIs REST e aprendemos como usar JavaScript para interagir com elas. Vimos como fazer requisições GET usando o objeto XMLHttpRequest e a função fetch, e como lidar com as respostas da API.

As APIs REST são uma poderosa ferramenta que permite que você integre seu aplicativo web com outros serviços e fontes de dados. Com o conhecimento adquirido neste artigo, você está pronto para explorar ainda mais o mundo das APIs REST e criar aplicativos web ainda mais poderosos.

Lembre-se de que este é apenas o começo e que há muito mais para aprender sobre APIs REST. Continue praticando e experimentando, e você se tornará um especialista em integração de APIs em pouco tempo.

Agora é hora de colocar em prática o que você aprendeu e começar a desenvolver seus próprios aplicativos web com APIs REST. Boa sorte e divirta-se codificando!