Lernen von REST-APIs in JavaScript

REST-APIs in JavaScript lernen

REST-APIs (Representational State Transfer Application Programming Interfaces) werden häufig zum Erstellen vernetzter Anwendungen verwendet. Dieser Artikel hilft Ihnen zu verstehen, wie Sie mit REST-APIs in JavaScript arbeiten, und deckt sowohl clientseitige als auch serverseitige Implementierungen ab.

---

1. Was ist eine REST-API?

Eine REST-API ermöglicht es Clients (z. B. Browsern oder mobilen Apps), mit Servern zu kommunizieren, um Daten abzurufen oder zu bearbeiten. Es folgt einer zustandslosen Architektur unter Verwendung von Standard-HTTP-Methoden.

Kernkonzepte

1. Ressourcen: Wird durch Endpunkte dargestellt (z. B. /users für Benutzerdaten).
2. HTTP-Methoden:
   • GET: Daten abrufen.
   • POST: Erstellen Sie eine neue Ressource.
   • PUT: Eine vorhandene Ressource aktualisieren.
   • LÖSCHEN: Eine Ressource entfernen.
3. Datenformat: JSON wird üblicherweise zum Datenaustausch verwendet.
4. HTTP-Statuscodes:
   • 200 OK: Erfolg.
   • 201 Erstellt: Ressource erstellt.
   • 400 Bad Request: Clientseitiger Fehler.
   • 404 Nicht gefunden: Ressource nicht gefunden.
   • 500 Interner Serverfehler: Serverproblem.

---

2. Tools und Setup

• Für Client-Seite:

  • Browser (JavaScript mit Fetch- oder Axios-Bibliothek).
  • Verwenden Sie APIs wie https://jsonplaceholder.typicode.com zum Üben.

• Für Serverseite:

  • Installieren Sie Node.js und verwenden Sie das Express-Framework.

---

3. Arbeiten mit REST-APIs auf der Clientseite

JavaScript stellt die fetch()-API und Bibliotheken von Drittanbietern wie axios für die Interaktion mit REST-APIs bereit.

---

Daten mit fetch() abrufen

So rufen Sie Daten von einer REST-API ab.

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

Erklärung:

1. fetch(url): Stellt eine HTTP-Anfrage.
2. Response.json(): Konvertiert die Antwort in das JSON-Format.
3. Die Fehlerbehandlung wird mithilfe von try...catch implementiert, um Netzwerkfehler oder ungültige Antworten abzufangen.

---

Daten mit POST senden

Um eine neue Ressource zu erstellen, verwenden Sie die POST-Methode mit der fetch()-API.

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

Wichtige Punkte:

• Die Methodenoption gibt die HTTP-Methode an.
• Die Option „Kopfzeilen“ wird verwendet, um den Inhaltstyp anzugeben.
• Der Text enthält die JSON-Nutzlast.

---

4. Erstellen von REST-APIs auf der Serverseite

Im Backend wird häufig Node.js mit dem Express-Framework zum Erstellen von REST-APIs verwendet.

Einrichten Ihrer Umgebung

1. Node.js installieren: Node.js herunterladen.
2. Neues Projekt initialisieren:

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

---

Erstellen einer einfachen REST-API

Hier ist ein Beispiel eines einfachen REST-API-Servers.

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

Erklärung:

• Middleware: app.use(express.json()) analysiert eingehende JSON-Anfragen.
• Routen:
  • GET /users: Alle Benutzer abrufen.
  • GET /users/:id: Einen bestimmten Benutzer abrufen.
  • POST /users: Einen neuen Benutzer hinzufügen.
  • PUT /users/:id: Benutzerdetails aktualisieren.
  • DELETE /users/:id: Einen Benutzer entfernen.

---

5. Testen Sie Ihre REST-API

Sie können Ihre API mit Tools wie Postman oder Befehlszeilendienstprogrammen wie Curl.

testen

Mit Postman

1. Installieren Sie Postman von hier aus.
2. Erstellen Sie eine neue Anfrage:
   • GET http://localhost:3000/users: Alle Benutzer abrufen.
   • POST http://localhost:3000/users: Fügen Sie einen Benutzer mit einem JSON-Body hinzu.

Curl verwenden

   mkdir rest-api-demo
   cd rest-api-demo
   npm init -y
   npm install express

---

6. Best Practices für die REST-API-Entwicklung

1. Verwenden Sie aussagekräftige Endpunktnamen (z. B. /users anstelle von /data).
2. Benutzereingaben validieren, um ungültige oder schädliche Daten zu verhindern.
3. Befolgen Sie konsistente HTTP-Statuscodes.
4. Dokumentieren Sie Ihre API mit Tools wie Swagger oder Postman.

---

mein Arbeitscode-Repo

Fazit

REST-APIs sind ein Eckpfeiler der modernen Webentwicklung. Indem Sie lernen, mit REST-APIs in JavaScript sowohl auf der Client- als auch auf der Serverseite zu interagieren, erwerben Sie leistungsstarke Fähigkeiten zum Erstellen und Integrieren von Anwendungen. Übung ist der Schlüssel – beginnen Sie mit der Nutzung öffentlicher APIs und erstellen Sie dann Ihre eigene API mit Node.js und Express.

---

Sie können jederzeit Fragen stellen oder Erläuterungen zu jedem Teil dieses Leitfadens einholen!

Das obige ist der detaillierte Inhalt vonLernen von REST-APIs in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!