Como fazer uma chamada de API do JavaScript?

Última atualização em Sábado 7º mai 2022

JavaScript Rest Api

  • É importante saber como fazer solicitações http e reexame de dados de um servidor.
  • JavaScript fornece alguma compilação em objetos para interagir com a API.

Usando XMLHttpRequest()

O objeto XMLHttpRequest pode ser usado para solicitar dados de um servidor web.

	 const request = new XMLHttpRequest();
    request.open("GET", "https://jsonplaceholder.typicode.com/posts");
    request.send();
    request.onLoad = () => {
       console.log(request);
       if(request.status === 200) {
           console.log(JSON.parse(request.response));
       } else {
           console.log(JSON.parse(request.response));
           console.log(error ${request.status});
       }
    };
	

Usando Fetch API()

Com o método fetch(). É preciso dois argumentos:

  • Uma URL ou um objeto representando a solicitação.
  • Objeto init opcional contendo o método, cabeçalhos, corpo etc.
	fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
	

API Call JavaScript

	async function getUsers() {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts');
    let data = await response.josn();
    console.log(data);
}

getUsers().then(res => {
   console.log(res)
})
	

Usando Axios

A Axios é um cliente HTTP baseado em promessas para nó.js e navegador.

  • Faça os requisitos XMLHttpRequest do navegador
  • Faça solicitações http do nó.js
  • Suporta a API Promessa
	axios().get('https://jsonplaceholder.typicode.com/posts')
     .then(res => {
        console.log(res)
     }, err =>{
        console.log(err)
     })
	

Usando jQuery

	$(document).ready(function(){
   $.ajax({
     url:"https://jsonplaceholder.typicode.com/posts",
     success: function(response){
        console.log(response)
     },
     error: function(error){
        console.log(error)
     },
   });
})
	

References