Verwenden der Fetch-API zum Abrufen und Veröffentlichen von Datein

In diesem Artikel werde ich darüber sprechen, wie die Javascript-Abruf-API verwendet wird, um Daten abzurufen und an eine öffentliche API zu senden.

VORAUSSETZUNG

Texteditor (Notepad ++, VSCode, Atom, Bracket, Sublime, jeder Texteditor Ihrer Wahl)
Browser (Chrome, Moxilla)
Auf jedem Server Ihrer Wahl (WAMP, XAMP) können Sie auch die Live-Server-Erweiterung installieren, wenn Sie VScode verwenden, den Atom-Live-Server, wenn Sie Atom verwenden, oder einfach den npm Live-Server installieren, npm install –g live-server wenn Sie Node auf Ihrem Computer installiert haben Maschine.

INTRO

Die Abruf-API ist ein integriertes Javascript ES6- Versprechen , mit dem XMLHttpRequest einfacher und einfacher asynchron abgerufen oder POST-Daten abgerufen werden können. Es gibt viele Bibliotheken, die verwendet werden, um XMLHttpRequest einfacher und leichter lesbar zu machen. Das beliebteste ist "jquery's ajax", aber mit der Fetch-API können wir XMLHttpRequest mit nativem Javascript erstellen, ohne eine Bibliothek zu importieren.

Unten finden Sie eine Syntax für den einfachen Rückruf von fetch ()

#fetch Syntax
         fetch(url)
            .then(function (res) {
                return res, json()
            })
            .then(function (data) {
                Console.log(data);
            }).catch(function (err) {
                console.log(err)
            })

Verwendung der Abruf-API zum Abrufen von Daten von einer API

Erstellen Sie ein Verzeichnis, nennen Sie es einen beliebigen Namen Ihrer Wahl, meiner heißt fetchAPI. Sie können dies auf herkömmliche Weise tun, indem Sie ein Verzeichnis erstellen, eine index.html-Datei im Ordner erstellen oder den folgenden Code in Ihrem Terminal verwenden.

//create directory
       mkdir fecthAPI
//enter the fecthAPI folder
       cd fetchAPI
//create  an index.html file
       touch index.html

Fügen Sie die grundlegenden HTML-Tags, zwei Schaltflächen-Tags mit der ID id = "getData" und id = "getAPI" sowie ein Absatz-Tag mit der ID = 'result' hinzu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fetch API</title>
</head>
<body>
      <button id="getData">GET DATA FROM LOCAL</button>
          <button id="getData">GET DATA FROM API </button>
          <p id="result"></p>

</body>
</html>

Die Schaltflächen werden verwendet, um eine GET-Anforderung an eine lokale sampleUser.json und eine öffentliche API zu senden. Es gibt viele öffentliche APIs, von denen Sie Daten abrufen können, z. B. die Github-API oder die Zufallsbenutzer-API . In diesem Beispiel verwenden wir jedoch die JSONPlaceholder- API. Eine API, die zufällige Benutzer generiert.

Erstellen Sie einen Javascript eventListener, um das Klickereignis in der Datei index.html zu behandeln.

<script>
        document.getElementById('getData').addEventListener('click', getData);
        document.getElementById('getAPI').addEventListener('click', getAPI);


        function getData(){
            // code to execte
        }

        function getAPI(){
            // code to execte
        }

</script>

Lassen Sie Daten mithilfe der Abruf-API aus der lokalen Datei abrufen, um mehr Verständnis für die Arbeit mit der lokalen Datei zu erhalten. Erstellen Sie eine JSON-Demo "sampleUsers.json", um zu versuchen, Daten darin abzurufen. > Hinweis: Erstellen Sie Ihre sampleUser.json im selben Ordner wie die Datei index.html, um den Zugriff zu erleichtern.

[
    {
        "id": 1,
        "name": "Ahmad Abdul-Aziz",
        "email": "Ahmad.abdulaziz37@gmail.com"     
    },
    {
        "id": 2,
        "name": "Ahmad Habib Hussein",
        "email": "Ahmadhabibhussein@mail.com"     
    },
    {
        "id": 3,
        "name": "Abdullahi Aminu",
        "email": "Aminuawesome@mail.com"     
    },
    {
        "id": 4,
        "name": "Idris Muhammad",
        "email": "rismad@mail.com"     
    }
]

Gut, jetzt schreiben wir das Skript fetch (), um Daten aus der soeben erstellten Datei sampleUser.json abzurufen und das Ergebnis in die Datei index.html auszugeben

Hinweis: Schreiben Sie ein Skript in die Funktion getData ()

//getData function

//Using javascript ES5 function 

fetch('sampleUser.json')
    .then(function (res) {
        return res.json();
    })
    .then(function (data) {
        let result = `<h2> User Info From sampleUser.json </h2>`;
        data.forEach((user) => {
            const { id, name, email } = user
            result +=
            `<div>
                <h5> User ID: ${id} </h5>
                <ul class="w3-ul">
                    <li> User Name : ${name}</li>
                    <li> User Email: ${email} </li>
                </ul>
            </div>`;

            document.getElementById('result').innerHTML = result;
        });
       })

Ok, wir können loslegen. Führen Sie den Code aus. "Yay" Einfach und schnell, oder? Wir werden dieselbe Methode anwenden, um Daten von einer echten API abzurufen, diesmal jedoch den API-Endpunkt bereitstellen.

Hinweis: Schreiben Sie ein Skript in die Funktion getAPI ()

//sampleUser.json is replaced by an API endpoint.

//Using ES6 arrow function 

    fetch('https://jsonplaceholder.typicode.com/users')
        .then((res) => { return res.json() })
        .then((data) => {
            let result = `<h2> Random User Info From Jsonplaceholder API</h2>`;
            data.forEach((user) => {
                const { id, name, email, address: { city, street } } = user
                result +=
                    `<div>
                     <h5> User ID: ${id} </h5>
                         <ul class="w3-ul">
                             <li> User Full Name : ${name}</li>
                             <li> User Email : ${email} </li>
                             <li> User Address : ${city}, ${street} </li>
                         </ul>
                      </div>`;
                        document.getElementById('result').innerHTML = result;
                    });
                })

Zu diesem Zeitpunkt können wir Daten sowohl von sampleUser.json lokal als auch von der Jsonplaceholder-API abrufen. Lass los und poste Daten

Verwendung der Abruf-API zum POSTEN von Daten an eine API

Fügen Sie in unserer Datei index.html ein Formular mit der ID = 'postData', zwei Eingabefeldern und einer Schaltfläche zum Senden hinzu.

<form  id="postData">
        <div>
            <input type="text" name="" id="tittle">
        </div>
        <div>
            <textarea name="" id="body" cols="20" rows="5"></textarea>
        </div>
        <input type="submit" value="SEND POST">
    </form>

Fügen Sie einen eventListener hinzu, um die Schaltfläche zum Senden in unserem Formular zu verarbeiten.

document.getElementById('postData').addEventListener('submit', postData);

 function postData(event){
            event.preventDefault();

            let tittle = document.getElementById('tittle').value;
            let body = document.getElementById('body').value;

            fetch('https://jsonplaceholder.typicode.com/posts', {
                method: 'POST',
                headers : new Headers(),
                body:JSON.stringify({tittle:tittle, body:body})
            }).then((res) => res.json())
            .then((data) =>  console.log(data))
            .catch((err)=>console.log(err))
        }

Verwenden Sie die Methode prepareDefault (), um den Browser zu stoppen oder daran zu hindern, die Standardaktion auszuführen. Sie können Ihre Antwort so behandeln, wie Sie möchten. In diesem Beispiel geben wir sie jedoch an die Konsole aus.

Fazit

Wir sind am Ende dieses Tutorials angelangt. Vielen Dank für das bisherige Lesen.

Dieser Beitrag ist nur eine einfache Einführung in das Abrufen und POSTEN von Daten mit der Abruf-API. Fühlen Sie sich frei, mehr zu entdecken: