Wie mache ich einen API Call JavaScript?

Zuletzt aktualisiert am Sonntag 13. März 2022

JavaScript Rest Api

  • Es ist wichtig zu wissen, wie man HTTP Anfragen stellt und Daten von einem Server retridt.
  • JavaScript Bietet einige eingebaute Objekte für die Interaktion mit der API.

Verwenden XMLHttpRequest()

Das XMLHttpRequest Objekt kann verwendet werden, um Daten von einem Webserver anzufordern.

	 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});
       }
    };

Verwenden Fetch API()

Mit der Methode fetch() Es braucht zwei Argumente.

  • Eine URL oder ein Objekt, das die Anforderung darstellt.
  • Optionales Init-Objekt, das die Methode, Header, Body usw. enthält.
	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)
})

Verwenden Axios

Axios ist ein vielversprechender HTTP-Client für Node.js und den Browser.

  • Erstellen Sie XMLHttpRequests über den Browser
  • Machen Sie HTTP-Anfragen vom Knoten.js
  • Unterstützt die Promise API
	axios().get('https://jsonplaceholder.typicode.com/posts')
     .then(res => {
        console.log(res)
     }, err =>{
        console.log(err)
     })

Verwenden jQuery

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

Referenzen

Verwandte Beiträge

Entfernen Sie doppelte Objekte aus einem Array

JavaScript Template Literals (Template Strings)

Export – JavaScript