Como fazer requisições em TypeScript da maneira correta

Quando estamos desenvolvendo aplicações em TypeScript, é comum precisarmos fazer requisições para obter ou enviar dados para um servidor. Neste artigo, vamos aprender a maneira correta de fazer requisições em TypeScript, utilizando as melhores práticas

Exemplo prático do uso de interfaces em typescript

Acesse também: Como Utilizar as Interfaces em TypeScript

1. Utilizando a biblioteca Axios

Uma das maneiras mais populares de fazer requisições em TypeScript é utilizando a biblioteca Axios. Ela fornece uma API simples e poderosa para lidar com requisições HTTP.

Para começar, vamos instalar o Axios em nosso projeto. Abra o terminal e execute o seguinte comando:

npm install axios

Após a instalação, vamos importar o Axios em nosso arquivo TypeScript:

import axios from 'axios';

Agora, podemos utilizar o Axios para fazer requisições. Veja um exemplo de como fazer uma requisição GET na api ViaCep para obter um valor de CEP:

// Importando a biblioteca Axios
import axios from 'axios';

// CEP que queremos consultar
const cep = '01001000'; // Substitua pelo CEP desejado

// URL da API ViaCEP
const apiUrl = `https://viacep.com.br/ws/${cep}/json/`;

// Fazendo a requisição GET usando o Axios
axios.get(apiUrl)
  .then(response => {
    // Manipulando os dados da resposta
    console.log('Dados da resposta:', response.data);
  })
  .catch(error => {
    // Manipulando erros, se houver algum
    console.error('Erro na requisição:', error);
  });

O resultado que você irá obter ao fazer esse GET é:

{
  "cep": "01001-000",
  "logradouro": "Praça da Sé",
  "complemento": "lado ímpar",
  "bairro": "Sé",
  "localidade": "São Paulo",
  "uf": "SP",
  "ibge": "3550308",
  "gia": "1004",
  "ddd": "11",
  "siafi": "7107"
}

2. Utilizando a função fetch

Outra maneira de fazer requisições em TypeScript é utilizando a função fetch, que é nativa do JavaScript. Ela também fornece uma forma simples de fazer requisições HTTP.

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

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

3. Tratando erros

Quando fazemos requisições em TypeScript, é importante lidar com possíveis erros que possam ocorrer durante o processo. Tanto o Axios quanto a função fetch possuem mecanismos para tratar erros de forma adequada.

No exemplo anterior, utilizamos o método catch para tratar erros. É importante sempre verificar se a requisição foi bem sucedida antes de manipular os dados retornados.

4. Enviando dados

Além de fazer requisições GET, também podemos enviar dados para o servidor utilizando requisições POST, PUT, DELETE, entre outras.

Veja um exemplo de como fazer uma requisição POST utilizando o Axios:

axios.post('https://api.example.com/users', {
  name: 'John Doe',
  email: 'johndoe@example.com'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Da mesma forma, podemos utilizar a função fetch para fazer requisições POST:

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'johndoe@example.com'
  })
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

Organize as Requisições da Melhor Forma Sempre

Ao fazer requisições em TypeScript, é importante utilizar as melhores práticas e escolher a abordagem mais adequada para cada situação. Neste artigo, vimos como fazer requisições utilizando o Axios e a função fetch, além de tratar erros e enviar dados para o servidor.

Espero que este artigo tenha sido útil e que você possa aplicar esses conhecimentos em seus projetos. Continue aprendendo e aprimorando suas habilidades em TypeScript!