首頁 >web前端 >js教程 >將 node-fetch/form-data 遷移到 Node.js 原生 API

將 node-fetch/form-data 遷移到 Node.js 原生 API

王林
王林原創
2024-07-28 06:07:021163瀏覽

Migrating node-fetch/form-data to Node.js native APIs

Node v16.15.0 和 v17.5.0 的發布引入了 Fetch API 和 FormData。在此之前,node-fetch 和 form-data 套件用於在 Node.js 中使用類似瀏覽器的 API。要將node-fetch/form-data套件遷移到Node.js本機API,可以透過刪除第3方包的導入語句來進行一些更改,但是在使用Node.js功能(例如檔案)時需要記住一些重要的注意事項系統。本文概述如何從 node-fetch/form-data 套件遷移到 Node.js 原生 API。

遷移概述

 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,
 });

細節

類型不相容

form-data 套件和 Node.js FormData 不相容,無法直接用 Fetch API 傳遞。如果將表單資料傳遞給原生 Fetch API,則請求正文將為字串 [object FormData]。

import FormData from 'form-data';

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

// [object FormData]

form-data 套件接受 Node.js 中的 fs.ReadStream。本機 API 接受與瀏覽器相容的 Blob。要從檔案建立 Blob,我們可以使用 Node.js v19.8.0 中新增的 fs.openAsBlob()。如果將 fs.ReadStream 傳遞給原生 API 的 FormData,則該值將為 [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]

內在行為不相容

form-data 套件從 fs.ReadStream 取得檔案名稱並將其用作檔案名稱段(內部實作)。它還根據檔案名稱確定檔案類型並設定 Content-Type 標頭(內部實作)。

Blob沒有檔名,需要手動指定。如果未指定 Content-Type,本機 API 的 FormData 預設為 application/octet-stream。我們可以從 fs.openAsBlob() 的參數中明確指定 Content-Type。

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

結論

Fetch API 和 FormData 從 Node.js v21.0.0 開始已變成 Stability: 2(穩定)。 fs.openAsBlob() 在最新版本的 Node.js(截至 2024 年 7 月 27 日的 v22.5.1)中仍然是 Stability: 1(實驗性)。在舊運行時運行或使用具有潛在功能變更的實驗性 API 時,我們需要小心。

以上是將 node-fetch/form-data 遷移到 Node.js 原生 API的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn