Migration de node-fetch/form-data vers les API natives Node.js

La sortie de Node v16.15.0 et v17.5.0 a introduit l'API Fetch et FormData. Avant cela, les packages node-fetch et form-data étaient utilisés pour utiliser des API de type navigateur dans Node.js. Pour migrer les packages node-fetch/form-data vers les API natives Node.js, certaines modifications peuvent être apportées en supprimant les instructions d'importation des packages tiers, mais il y a des considérations importantes à garder à l'esprit lors de l'utilisation des fonctionnalités de Node.js telles que le fichier système. Cet article décrit la migration des packages node-fetch/form-data vers les API natives Node.js.

Aperçu de la migration

 import fs from 'node:fs';
-import FormData from 'form-data';
-import fetch from 'node-fetch';

-const file = fs.createReadStream('secret.txt');
+const file = await fs.openAsBlob('secret.txt', { type: 'text/plain' });
 const form = new FormData();
-form.append('file', file);
+form.append('file', file, 'secret.txt');

 const response = await fetch('https://example.com/upload', {
   method: 'POST',
   body: form,
 });

Détails

Incompatibilité des types

Le package form-data et Node.js FormData ne sont pas compatibles et ne peuvent pas être transmis directement avec l'API Fetch. Si vous transmettez les données du formulaire à l'API Fetch native, le corps de la requête sera la chaîne [object FormData].

import FormData from 'form-data';

const form = new FormData();
await fetch('https://example.com/upload', {
  method: 'POST',
  body: form,
});

// [object FormData]

Le package form-data accepte fs.ReadStream dans Node.js. L'API native accepte un Blob compatible avec le navigateur. Pour créer un Blob à partir d'un fichier, nous pouvons poursuivre fs.openAsBlob(), ajouté dans Node.js v19.8.0. Si vous transmettez fs.ReadStream au FormData de l'API native, la valeur sera [object Object].

import fs from 'node:fs';

const file = fs.createReadStream('secret.txt');
const form = new FormData();
form.append('file', file);

// Content-Disposition: form-data; name="file"
// 
// [object Object]

Incompatibilité du comportement interne

Le package form-data obtient le nom de fichier de fs.ReadStream et l'utilise comme champ de nom de fichier (implémentation interne). Il détermine également le type de fichier à partir du nom du fichier et définit l'en-tête Content-Type (implémentation interne).

Blob n'a pas de nom de fichier, il doit être spécifié manuellement. Le FormData de l'API native est par défaut application/octet-stream si le Content-Type n'est pas spécifié. Nous pouvons spécifier explicitement le Content-Type à partir de l'argument de fs.openAsBlob().

const file = await fs.openAsBlob('secret.txt');
const form = new FormData();
form.append('file', file);

// Content-Disposition: form-data; name="file"; filename="blob"
// Content-Type: application/octet-stream

const file = await fs.openAsBlob('secret.txt', { type: 'text/plain' });
const form = new FormData();
form.append('file', file, 'secret.txt');

// Content-Disposition: form-data; name="file"; filename="secret.txt"
// Content-Type: text/plain

Conclusion

Fetch API et FormData sont devenus Stability : 2 (Stable) à partir de Node.js v21.0.0. fs.openAsBlob() est toujours Stabilité : 1 (Expérimental) dans la dernière version de Node.js (v22.5.1 au 27 juillet 2024). Nous devons faire attention lorsque nous exécutons d'anciens environnements d'exécution ou que nous utilisons des API expérimentales qui comportent des modifications potentielles de fonctionnalités.

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!