Wie erhalte ich Daten mithilfe der JavaScript-Abruf-API?-js-Tutorial-php.cn

如何使用 JavaScript Fetch API 获取数据？

JavaScript ist heutzutage sehr nützlich zum Schreiben von Front-End- und Back-End-Code. Darüber hinaus ist es auch die am weitesten verbreitete Programmiersprache.

Außerdem müssen wir bei der Entwicklung von Echtzeitanwendungen Daten von anderen Servern abrufen. Wir können API (Application Programming Interface) verwenden, um Daten von anderen Servern oder Datenbanken abzurufen.

Hier lernen wir verschiedene Möglichkeiten kennen, Daten mithilfe von JavaScript abzurufen.

Verwenden Sie die fetch()-Methode

fetch() ist die Methode, die der Browser verwendet, um Daten von der API abzurufen. Es verwendet die API-URL als ersten Parameter, von dem wir die Daten abrufen müssen, und die Optionen als zweiten Parameter. Diese Optionen können Header und Authentifizierungstoken enthalten.

Grammatik

Benutzer können die folgende Syntax für fetch() verwenden, um Daten abzurufen.

fetch(baseURL)
.then(data => {
   // use data here
}

Nach dem Login kopieren

In der obigen Syntax ist baseURL eine API zum Abrufen von Daten.

Beispiel 1

Wenn der Benutzer im folgenden Beispiel auf die Schaltfläche klickt, führt er die Funktion fetchData() aus. In der Funktion fetchData() verwenden wir die Methode fetch(), um die Daten von der API abzurufen. Danach haben wir Antworten und Fehler bearbeitet. Benutzer können die Daten, die wir von der API erhalten, in der Ausgabe sehen.

<html>
<body>
   <h2>Using the <i> fetch() browser method </i> to fetch data from API</h2>
   <div id = "output"> </div> 
   <button onclick = "fetchData()"> Fetch API to get data </button>
   <script>
      let output = document.getElementById('output');
      function fetchData() {
         fetch('https://dummyjson.com/products/1')
         .then(response => response.json())
         .then(data => {
            output.innerHTML += "id = " + data.id + "<br/>";
            output.innerHTML += "brand = " + data.brand + "<br/>";
            output.innerHTML += "category = " + data.category + "<br/>";
            output.innerHTML += "price = " + data.price + "<br/>";
            output.innerHTML += "rating = " + data.rating + "<br/>";
            output.innerHTML += "stock = " + data.stock + "<br/>";
         })
      }
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden des Axios NPM-Pakets

axios ist ein NPM-Paket, das es Entwicklern ermöglicht, mit APIs zu interagieren, indem sie Anfragen wie GET, POST, PUT usw. stellen. Hier werden wir Axios verwenden, um eine GET-Anfrage zu stellen, um die Daten in JavaScript abzurufen.

Grammatik

Benutzer können axios verwenden, um Daten von der API gemäß der folgenden Syntax abzurufen.

axios.get(URL)
.then((response) => {
   // use response
}

Nach dem Login kopieren

In der obigen Syntax haben wir die Methode axios.get() verwendet, um Daten von der API abzurufen.

Beispiel 2

In diesem Beispiel lösen wir das Promise mithilfe der Blöcke then() und Catch() auf, die wir vom Server oder der Datenbank erhalten haben. Wir nutzen die Daten im then()-Block und den Fehler im Catch()-Block aus.

<html>
<head>
   <script src ="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"></script>
</head>
<body>
   <h2>Using the <i> Axios NPM package </i> to fetch data from API</h2>
   <div id = "output"> </div>
   <button onclick = "fetchData()"> Fetch data using Axios </button>
   <script>
      let output = document.getElementById('output');
      function fetchData() {
         axios.get("https://jsonplaceholder.typicode.com/todos/1") 
         .then((response) => {
            output.innerHTML += "userId : " + response.data.userId + "<br/>";
            output.innerHTML += "id : " + response.data.id + "<br/>";
            output.innerHTML += "title : " + response.data.title + "<br/>";
            output.innerHTML += "completed : " + response.data.completed + "<br/>";
         })
         .catch((err) => {
            output.innerHTML += "The error is - " + err + "<br/>";
         })
      }
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 3

Im folgenden Beispiel verwenden wir Axios, um Daten über die Async/Await-Syntax abzurufen. Wir haben die Funktion getData() asynchron gemacht. Darüber hinaus haben wir in Axios das Schlüsselwort „await“ verwendet, um die Ausführung der Funktion anzuhalten, bis wir eine Antwort von der API erhalten.

<html>
<head>
   <script src ="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"></script>
</head>
<body>
   <h2>Using the <i> Axios NPM package </i> with Async/await syntax to fetch data from API</h2>
   <div id = "output"> </div>
   <button onclick = "getData()"> get data using Axios </button>
   <script>
      let output = document.getElementById('output');
      async function getData() {
         let response = await
         axios.get("https://jsonplaceholder.typicode.com/todos/1")
         for (let key in response.data) {
            output.innerHTML += key + " - " + response.data[key] + "<br/>";
         }
      }
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden der XMLHttpRequest-Web-API

XMLHttpRequest-Web-API ermöglicht es uns, Module zum Abrufen von Daten zu erstellen. Wir können ein Objekt erstellen und es mit XMLHttpRequest initialisieren. Wir können dieses Objekt dann verwenden, um eine GET-Anfrage zu öffnen.

Danach können wir die Callback-Funktion aufrufen, wenn XMLHttpRequest geladen wird. Die Rückruffunktion kann den Antwortstatus abrufen und die Antwort oder den Fehler entsprechend zurückgeben.

Grammatik

const xmlRequest = new XMLHttpRequest();
xmlRequest.open('GET', apiURL);
xmlRequest.responseType = 'json';
xmlRequest.onload = function () {
   // handle the response from API
}
xmlRequest.send();

Nach dem Login kopieren

In der obigen Syntax öffnen wir zuerst die Anfrage mit der open()-Methode und verarbeiten dann die Antwort von der API mit dem onload-Ereignis.

Beispiel 4

Im folgenden Beispiel müssen wir ein benutzerdefiniertes Modul mithilfe der XMLHttpRequest()-Web-API erstellen, um Daten von der API abzurufen. Die Funktion customRequest() enthält benutzerdefinierte Module.

Danach rufen wir die Funktion „customRequest()“ auf, indem wir die URL als Parameter übergeben und verwenden einen then()-Block, um das von der Funktion „customRequest()“ zurückgegebene Promise aufzulösen.

<html>
<body>
   <h2>Using the <i> XMLHttpRequest web API </i> to fetch data from API</h2>
   <div id = "output"> </div>
   <button onclick = "getData()"> get data </button>
   <script>
      let output = document.getElementById('output');
      const customRequest = (apiURL) => {
         return new Promise((res, rej) => {
      
            // Create a new Object of XMLHttpRequest
            const xmlRequest = new XMLHttpRequest();
            
            // open a get request
            xmlRequest.open('GET', apiURL);
            
            // set response type
            xmlRequest.responseType = 'json';
            xmlRequest.onload = function () {
               // resolve the promise when we get a successful response
               if (xmlRequest.status == 200) {
                  res(xmlRequest.response);
               } else {
                  
                  // reject promise on error
                  rej(xmlRequest.response);
               }
            };
            
            // send request
            xmlRequest.send();
         }); 
      };
      
      // making the get request from URL
      const getData = async () => {
         try {
            const data = await customRequest(
               'https://dummyjson.com/products/1',
            );
            output.innerHTML += "category = " + data.category + "<br/>";
            output.innerHTML += "price = " + data.price + "<br/>";
            output.innerHTML += "rating = " + data.rating + "<br/>";
            output.innerHTML += "stock = " + data.stock + "<br/>";
         } catch (err) {
            output.innerHTML += "The error is : " + err + "<br/>";
         }
      };
   </script>
</body>
</html>

Nach dem Login kopieren

Wir haben drei verschiedene Möglichkeiten kennengelernt, Daten von der API abzurufen. Der beste Weg ist die Verwendung der fetch()-Methode des Browsers, da wir für die Verwendung kein Modul installieren müssen. Darüber hinaus sollten Benutzer alle Module mit Async/Await-Syntax verwenden.

Das obige ist der detaillierte Inhalt vonWie erhalte ich Daten mithilfe der JavaScript-Abruf-API?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!