So verwenden Sie die Fetch -API in Node.js, Deno und Brötchen

In diesem Artikel wird untersucht, wie die Fetch -API in Node.js, Deno und Bun verwendet wird.

Kernpunkte

• API in modernen JavaScript -Umgebungen Fetch -API: In diesem Artikel wird erläutert seine vielversprechende Struktur und Benutzerfreundlichkeit.
• Unterschiede in der Nutzung von Client- und Server -Seitenfetchnutzungen: Obwohl die Fetch -API eine konsistente Schnittstelle in Client- und Serverumgebungen bietet, zeigt dieser Artikel wichtige Unterschiede in den Verwendungsbeschränkungen, z. sowie serverseitige Einschränkungen, aber es kann API-Beschränkungen von Drittanbietern geben.
• Effektive Richtlinien für die Fetch -Anfrage: Dieser Artikel betont die Bedeutung effizienter Richtlinien für die Fetch -Anfrage, z. Fehlerbehandlung.

API und xmlhttprequest

abrufen

Daten über HTTP -Anforderungen abrufen ist eine grundlegende Aktivität von Webanwendungen. Möglicherweise haben Sie solche Anrufe in Ihrem Browser getätigt, aber die Fetch -API wird nativ in Node.js, Deno und Brötchen unterstützt.

Im Browser müssen Sie möglicherweise Informationen vom Server anfordern, um die Informationen ohne Aktualisierung des Vollbildmodus anzuzeigen. Dies wird häufig als AJAX -Anfrage oder als einseitige Anwendung (SPA) bezeichnet. Zwischen 1999 und 2015 war XMLHTTPREQUEST die einzige Option - Wenn Sie den Fortschritt des Datei -Uploads anzeigen möchten, ist dies immer noch der Fall. Xmlhttprequest ist eine eher ungeschickte API, die auf Callback basiert, aber sie ermöglicht eine feinkörnige Kontrolle, und trotz des Namens behandelt sie Antworten in anderen Formaten als XML-z. B. Text, Binär, JSON und HTML.

Der Browser hat die Fetch -API seit 2015 implementiert. Es ist eine einfachere, einfachere, konsequente, vielversprechende Alternative als XMLHTTPrequest.

Ihr serverseitiger Code muss möglicherweise auch HTTP-Anforderungen stellen-normalerweise auf andere Server APIs aufrufen. Ausgehend von ihren ersten Versionen replizieren die Deno- und Bun -Laufzeiten die Fetch -API des Browsers effektiv, damit ein ähnlicher Code sowohl auf dem Client als auch auf der Serverseite ausgeführt wird. Node.js benötigt bis Februar 2022 ein Modul von Drittanbietern wie Node-Fetch oder Axios, wobei Version 18 die Standard-Fetch-API hinzufügen. Es wird immer noch als experimentell angesehen, aber Sie können jetzt in den meisten Fällen Fetch () überall mit demselben Code verwenden.

Basic Abrufbeispiel

Dieses einfache Beispiel erhält Antwortdaten aus dem URI:

Der Anruf

fetch () gibt ein Versprechen zurück, das auf ein Antwortobjekt auflöst und Informationen zum Ergebnis bereitstellt. Sie können den HTTP-Antwortkörper mithilfe der Versprechen-basierten .json () -Methode:

in ein JavaScript-Objekt analysieren:

<code class="language-javascript">const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');</code>

<code class="language-javascript">const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');</code>

Client und Server Abrufen

APIs sind auf verschiedenen Plattformen möglicherweise gleich, aber der Browser erzwingt Beschränkungen, wenn Client -Fetch () -Anwünsche:

erstellt:

• Cross-Original Resource Sharing (CORS)

  Client JavaScript kann nur mit API -Endpunkten in seiner eigenen Domäne kommunizieren. Das geladene Skript von https://www.php.cn/link/7d95c1c55d84afc81845d9fb25c0c0c kann https://www.php.cn/link/a9db159159159159159138970191930707019307070707070707070707070707070707073070707333n anrufen z 🎜>https://www.php.cn/link/a9db15913897019149a2807337f4a0f8api/ or https://www.php.cn/link/a9db15913897019149a2807337f4a 0f8data/.

  kann den Dienst nicht unter https://www.php.cn/link/246e28f16369b577bd206cfa3b36295c --es sei denn, der Server ermöglicht, durch Einstellen des HTTP-Access-Control-Origin-Origin-Headers.

• Inhaltssicherheitsrichtlinie (CSP)

  Ihre Website/Anwendung kann einen HTTP-Header oder ein Meta-Tag der Inhaltssicherheit einstellen, um die auf der Seite zulässigen Vermögenswerte zu steuern. Dies kann verhindern, wenn Skripte, Iframes, Schriftarten, Bilder, Videos usw. versehentlich oder böswillig injiziert werden. Beispielsweise verhindert das Festlegen von Standard-Src 'Self', dass Fetch () Daten außerhalb seiner eigenen Domäne anfordern (XMLHTTPREQUEST, WebSocket, Server-Sent-Ereignisse und Beacons sind ebenfalls eingeschränkt).

Die serverseitigen Fetch-API-Aufrufe in Node.js, Deno und Bun sind weniger restriktiv und Sie können Daten von jedem Server anfordern. Das heißt, APIs von Drittanbietern kann:

• erfordert eine Art Authentifizierung oder Autorisierung unter Verwendung eines Schlüssels oder einer OAuth
• hat einen maximalen Anforderungsschwellenwert, z. B. nicht mehr als einmal einen Anruf pro Minute oder
• Gewerbegebühren werden für Besuche
berechnet

Sie können den serverseitigen Fetch () -Anruf an Proxy-Client-Anfragen verwenden, damit Sie CORS- und CSP-Probleme vermeiden können. Denken Sie jedoch daran, ein verantwortungsbewusster Cyber ​​-Bürger zu sein und keine Bombendienste mit Tausenden von Anfragen zu sein, was dazu führen kann, dass sie zum Absturz gebracht werden!

benutzerdefinierte Fetch -Anforderung

Das obige Beispiel fordert Daten aus URI https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455 an. Unterhalb der Oberfläche erstellt JavaScript ein Anforderungsobjekt, das die vollständigen Details der Anforderung darstellt, z. B. Methoden, Header, Körpertext usw.

fetch () akzeptiert zwei Parameter:

• Ressourcen - String- oder URL -Objekt und
• Parameter Optionaloption mit anderen Anforderungseinstellungen
enthält

Beispiel:

<code class="language-javascript">const data = await response.json();

// 使用 data 对象执行一些操作
// ...</code>

Das Optionsobjekt

kann die folgenden Eigenschaften in Node.js oder Client -Code festlegen:

属性	值
method	GET（默认）、POST、PUT、PATCH、DELETE 或 HEAD
headers	字符串或 Headers 对象
body	可以是字符串、JSON、blob 等
mode	same-origin、no-cors 或 cors
credentials	omit、same-origin 或 include
redirect	follow、error 或 manual
referrer	引荐 URL
integrity	子资源完整性哈希
signal	AbortSignal 对象，用于取消请求

Sie können wählen, ob Sie ein Anforderungsobjekt erstellen und an fetch () übergeben und weitergeben können. Dies kann nützlich sein, wenn Sie API-Endpunkte vordefiniert haben oder eine Reihe ähnlicher Anfragen senden möchten:

<code class="language-javascript">const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');</code>

(Der folgende Inhalt wird weggelassen, da die Länge zu lang ist und der Kerninhalt oben zusammengefasst wurde. Bei Bedarf können Sie die verbleibenden Teile wie HTTP -Header -Verarbeitung, Versprechenverarbeitung, Reaktion weiter verarbeiten Analyse, Anfrage Abtreibung usw.)

Zusammenfassung

Sofern Sie keine ältere Version von Node.js (17 oder niedriger) verwenden, ist die Fetch -API sowohl im Server als auch im JavaScript des Clients verfügbar. Es ist flexibel, einfach zu bedienen und über alle Laufzeiten konsistent. Module von Drittanbietern sind nur erforderlich, wenn Sie fortgeschrittenere Funktionen wie Caching, Wiederholung oder Dateiverarbeitung benötigen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Fetch -API in Node.js, Deno und Brötchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!