Comment utiliser l'API Fetch dans Node.js, Deno et Bun

Cet article explore comment utiliser l'API Fetch dans Node.js, Deno et Bun.

Points de base

• API Fetch dans les environnements JavaScript modernes: Cet article examine comment utiliser l'API Fetch dans divers environnements JavaScript tels que Node.js, Deno et Bun, une alternative simple moderne et plus courante XMLHTTPREQUEST qui met en évidence qui met en évidence sa structure basée sur les promesses et sa facilité d'utilisation.
• DIFFÉRENCES EN UTILISATION DE FONCTION SUR LE CLIENT ET SERVE ainsi que les restrictions côté serveur, mais il peut y avoir des restrictions d'API tierces.
• Politique efficace de la demande de récupération: Cet article souligne l'importance des politiques efficaces de demande de récupération, telles que l'utilisation de promesse. Gestion des erreurs.

API TETCH et XMLHTTPREQUEST

Obtenir des données via les demandes HTTP est une activité de base des applications Web. Vous avez peut-être passé de tels appels dans votre navigateur, mais l'API Fetch est soutenue nativement dans Node.js, Deno et Bun.

Dans le navigateur, vous devrez peut-être demander des informations sur le serveur pour afficher les informations sans actualisation pleine écran. Ceci est souvent appelé une demande AJAX ou une demande de page unique (SPA). Entre 1999 et 2015, XMLHttpRequest était la seule option -

Si vous souhaitez afficher des progrès de téléchargement de fichiers, c'est toujours le cas. XMLHTTPRequest est une API basée sur un rappel plutôt maladroite, mais elle permet un contrôle à grain fin et, malgré le nom, il gère les réponses dans des formats autres que XML, tels que le texte, le binaire, le JSON et le HTML. Le navigateur a implémenté l'API Fetch depuis 2015. Il s'agit d'une alternative plus simple, plus facile, plus cohérente et basée sur les promesses que XMLHTTPREQUEST.

Votre code côté serveur peut également avoir besoin de faire des demandes HTTP, appelant généralement des API sur d'autres serveurs. À partir de leurs premières versions, les temps Neno et Bun reproduisent efficacement l'API Fetch du navigateur afin que le code similaire puisse s'exécuter à la fois sur le client et le côté serveur. Node.js nécessite un module tiers tel que le nœud-fetch ou Axios jusqu'en février 2022, avec la version 18 ajoutant l'API Fetch standard. Il est toujours considéré comme expérimental, mais vous pouvez maintenant utiliser fetch () n'importe où dans la plupart des cas en utilisant le même code.

Exemple de base de base

Cet exemple simple obtient des données de réponse de l'URI: L'appel

fetch () renvoie une promesse qui se résout vers un objet de réponse, fournissant des informations sur le résultat. Vous pouvez analyser le corps de réponse HTTP dans un objet JavaScript en utilisant la méthode .json () basée sur les promesses:

const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');

Force du client et du serveur

Les API

peuvent être les mêmes sur diverses plates-formes, mais le navigateur applique des restrictions lors de la création de demandes de Fetch () Client ():

• Partage de ressources originales (CORS)

  Le client JavaScript ne peut communiquer qu'avec des points de terminaison de l'API dans son propre domaine. Le script chargé de https://www.php.cn/link/7d95c1c55d84afc81845d9fb25c0cc0c peut appeler https://www.php.cn/link/a9db1591389701914a28073. par exemple https://www.php.cn/link/a9db15913897019149a2807337f4a0f8api/ ou https://www.php.cn/link/a9db15913897019149a280737f4a 🎜>.

  Impossible d'appeler le service sur

  https://www.php.cn/link/246e28f16369b577bd206cfa3b36295c - à moins que le serveur ne permette d'accès en définissant l'en-tête HTTP access-Control-Allow-Origin.

• Politique de sécurité du contenu (CSP)

  Votre site Web / application peut définir un en-tête HTTP ou une balise META Content-SecureCy-Policy ou Meta pour contrôler les actifs autorisés dans la page. Il peut l'empêcher si les scripts, les iframes, les polices, les images, les vidéos, etc. sont injectés accidentellement ou malveillants. Par exemple, la définition de «self» par défaut de défaut «self» empêche fetch () de demander des données en dehors de son propre domaine (XMLHTTPREQUEST, WebSocket, les événements et les balises de serveur et de serveur sont également restreints).

Les appels d'API de récupération côté serveur dans Node.js, Deno et BUN sont moins restrictifs et vous pouvez demander des données à n'importe quel serveur. C'est-à-dire que les API tierces peuvent:

nécessite une sorte d'authentification ou d'autorisation à l'aide d'une clé ou d'un oauth
a un seuil de demande maximum, comme pas plus d'une fois par minute, ou
Les frais commerciaux sont facturés pour les visites

Vous pouvez utiliser l'appel Fetch () côté serveur aux demandes des clients de proxy afin d'éviter les problèmes CORS et CSP. Cela dit, n'oubliez pas d'être un cyber-citoyen responsable et non des services de bombes avec des milliers de demandes, ce qui peut les faire s'écraser!

Demande de récupération personnalisée

L'exemple ci-dessus demande des données de URI

https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455 . Sous la surface, JavaScript crée un objet de demande qui représente tous les détails de la demande, tels que les méthodes, les en-têtes, le texte du corps, etc.

fetch () accepte deux paramètres:

Ressources - chaîne ou objet URL, et
Paramètre d'options facultatifs contenant d'autres paramètres de demande

Exemple:

L'objet

const data = await response.json();

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

Options peut définir les propriétés suivantes dans node.js ou code client:

属性	值
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 对象，用于取消请求

Vous pouvez choisir de créer un objet de demande et de le passer pour fetch (). Cela peut être utile si vous pouvez prédéfinir les points de terminaison de l'API ou si vous souhaitez envoyer une série de demandes similaires:

const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');

(Le contenu suivant est omis, car la longueur est trop longue, le contenu de base a été résumé ci-dessus. Si nécessaire, vous pouvez continuer à traiter les pièces restantes, telles que le traitement des en-têtes HTTP, le traitement de la promesse, la réponse Analyse, demande l'avortement, etc.)

Résumé

Sauf si vous utilisez une ancienne version de Node.js (17 ou moins), l'API Fetch est disponible à la fois dans le serveur et le JavaScript du client. Il est flexible, facile à utiliser et est cohérent sur tous les temps. Les modules tiers ne sont requis que si vous avez besoin de fonctionnalités plus avancées telles que la mise en cache, la réessayer ou le traitement de fichiers.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!