Node.js に fetch がやってきた

ブラウザで実行される JavaScript とサーバーサイドで実行される Node.js では提供される API に違いがあります。

例えば DOM を操作する目的で使用する Document.querySelector() は Node.js に存在しないですし、反対にファイルを操作する目的で使用される fs モジュールはブラウザには存在しない API です。

リソースを取得するためのリクエストを実施する Fetch API も同様にブラウザにのみ存在する API でした。

Document.querySelector() のようなそもそも DOM の存在しないサーバーの API として提供されていないのわかりやすいですが、いかにも普遍的に使用できそうな Fetch() が Node.js の API に存在しないというのは初心者にとってはわかりづらく（確かに fetch() はブラウザの提供する API ではなく JavaScript 自体に内包されているグローバル関数に思えてもおかしくはない）stack overflow でも Node.js に fetch() が存在しないという質問が多くの票を集めています。

ReferenceError: fetch is not defined

実用面で見ても現在の実行環境がブラウザかサーバーかを気にせずに実行できる HTTP クライアントが存在していないため axios などのサードパーティライブラリをブラウザとサーバーで共通で使用したり、node-fetch などのライブラリを利用して Node.js 上で fetch() を利用できるようにする必要がありました。

そのような状況の中、ついに Node.js の標準ライブラリとして Fetch API が取り込まることとなりました。内部的には undici.fetch が使用されており WHATWG fetch と互換性があります。

lib: add fetch by targos · Pull Request #41749 · nodejs/node

Refs: nodejs/undici#1183 /cc @nodejs/undici This adds a --experimental-fetch flag that installs the fetch, Request, Response and Headers globals.

github.com

fetch() の使いかた

Fetch API を利用するには Node.js のバージョンが 17.5.0 以上であることが必要です。現時点（2022/2/07）ではまだリリースされてないのでまだ使えません🤷‍♂️。

また互換性を保つために Fetch API を利用するには --experimental-fetch フラグを付与して実行する必要があります。

node fetch.js --experimental-fetch

Node.js v18 移行では --experimental-fetch を付与せずに Fetch API が使用できるようになります。

基本的な使用方法はブラウザの Fetch API と同様に使えます。

const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();
  return data;
}
 
fetchUsers().then(data => console.log(data));