Fetch API e Axios §

Fetch API §

A Fetch API é uma moderna interface para fazer requisições HTTP no navegador. Utilizando o método fetch(), toda a verbosidade associada ao XMLHttpRequest é abstraída em uma única chamada de método. O fetch() retorna uma Promise que resolve para o Response, permitindo que você lide com a resposta de maneira assíncrona.

fetch("home.html")
  .then((response) => {
    if (response.status !== 200) {
      throw new Error();
    }
 
    return response.text();
  })
  .then((html) => console.log(html))
  .catch((error) => console.error(error));

Axios §

O Axios é uma biblioteca para fazer requisições HTTP em ambientes tanto de navegador quanto de servidor. Ele simplifica a realização de solicitações HTTP e tratamento de respostas, oferecendo uma interface mais amigável que a Fetch API. O Axios retorna uma Promise diretamente do método axios(), facilitando o tratamento de requisições assíncronas.

Antes de usar o Axios em um script JS, é necessário incluir o seguinte trecho na página HTML para carregar a biblioteca:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios("people.json").then((response) =>
  loadElementsOnPage(response.data)
);

Axios VS Fetch API §

Contexto §

// people.json
[
  {
    "name": "Miguel",
    "email": "miguel@email.com.br",
    "salary": 27211,
    "state": "MG",
    "company": "Facebook",
    "age": 34,
    "gender": "M",
    "cpf": "362.418.524-18"
  },
  {
    "name": "Sophia",
    "email": "sophia@company.com.br",
    "salary": 6971,
    "state": "DF",
    "company": "Plastic Co.",
    "age": 25,
    "gender": "F",
    "cpf": "742.316.671-52"
  }
]

Fetch API §

fetch("people.json")
	.then((response) => response.json())
	.then((json) => loadElementsOnPage(json));

Axios §

axios("people.json").then((response) =>
	loadElementsOnPage(response.data)
);

Ambas as abordagens, Fetch API e Axios, são eficazes para fazer requisições HTTP, e a escolha entre elas muitas vezes se resume a preferências pessoais e requisitos específicos do projeto. O Axios fornece uma interface mais consistente e amigável, enquanto a Fetch API é uma opção nativa com suporte em navegadores modernos.