node.js、deno、およびbunでフェッチAPIを使用する方法

この記事では、node.js、deno、およびbunでFetch APIを使用する方法について説明します。

コアポイント

• 最新のJavaScript環境でAPIをフェッチする：この記事では、node.js、deno、bunなどのさまざまなJavaScript環境でフェッチAPIを使用する方法について説明します。その約束に基づいた構造と使いやすさ。 クライアントとサーバーのフェッチの使用の違い
• の違い：Fetch APIはクライアント環境とサーバー環境で一貫したインターフェイスを提供しますが、この記事では、クライアントCORSやCSPなどの使用法制限の重要な違いを強調しています。サーバー側の制限もありますが、サードパーティのAPI制限がある場合があります。
• 効果的なフェッチリクエストポリシー：この記事では、Promise.Allsettedを使用するなど、効率的なフェッチリクエストポリシーの重要性を強調しています。エラー処理。

Fetch APIおよびXMLHTTPREQUEST HTTPリクエストを介してデータを取得することは、Webアプリケーションの基本的なアクティビティです。ブラウザでそのような呼び出しを行ったかもしれませんが、フェッチAPIはnode.js、deno、およびbunでネイティブにサポートされています。

ブラウザでは、フル画面の更新なしで情報を表示するために、サーバーから情報を要求する必要がある場合があります。これは、多くの場合、AJAXリクエストまたは単一ページアプリケーション（SPA）と呼ばれます。 1999年から2015年の間に、XMLHTTPREQUESTが唯一のオプションでした。ファイルアップロードの進行状況を表示する場合は、まだ当てはまります。 XMLHTTPREQUESTはかなり不器用なコールバックベースのAPIですが、微調整された制御を可能にし、名前にもかかわらず、テキスト、バイナリ、JSON、およびHTMLなどのXML以外の形式で応答を処理します。

ブラウザは、2015年以来Fetch APIを実装しています。 XmlhttpRequestよりも、よりシンプルで、より簡単で、より一貫性があり、約束に基づいた代替品です。

サーバー側のコードも、HTTP要求を行う必要がある場合があります。通常、他のサーバーでAPIを呼び出します。最初のバージョンから始めて、DenoとBunのランタイムは、クライアント側とサーバー側の両方で同様のコードが実行できるように、ブラウザのFetch APIを効果的に複製します。 node.jsには、2022年2月までノードフェッチやaxiosなどのサードパーティモジュールが必要で、バージョン18は標準のフェッチAPIを追加します。まだ実験的であると考えられていますが、ほとんどの場合、同じコードを使用してfetch（）を使用できるようになりました。

基本的なフェッチの例

この簡単な例は、URIから応答データを取得します：

fetch（）callは、応答オブジェクトに解決する約束を返し、結果に関する情報を提供します。 Promiseベースの.json（）方法を使用して、HTTP応答本体をJavaScriptオブジェクトに解析できます。

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

クライアントとサーバーフェッチ

APIはさまざまなプラットフォームで同じかもしれませんが、クライアントfetch（）リクエストを作成するときにブラウザは制限を強制します：

• オリジナルクロスリソース共有（CORS）

  クライアントJavaScriptは、独自のドメイン内のAPIエンドポイントとのみ通信できます。 https://www.php.cn/link/7d95c1c55d84afc81845d9fb25c0c0ccのロードされたスクリプトは、https://www.php.cn/link/a9db1599997019a 🎜>https://www.php.cn/link/a9db15913897019149a2807337f4a0f8api/ or https://www.php.cn/link/a9db15913897019149a2807337f4a 0f8data/. https://www.php.cn/link/246e28f16369b577bd206cfa3b36295cでサービスを呼び出すことはできません。

  コンテンツセキュリティポリシー（csp）

• Webサイト/アプリケーションは、コンテンツセキュリティポリティHTTPヘッダーまたはメタタグを設定して、ページで許可されている資産を制御できます。スクリプト、IFRAME、フォント、画像、ビデオなどが誤ってまたは悪意のある注入されている場合、これを防ぐことができます。たとえば、デフォルトのSRC 'self'の設定により、fetch（）が独自のドメイン外のデータを要求するのを防ぎます（xmlhttprequest、websocket、サーバーセントイベント、ビーコンも制限されています）。

  node.js、deno、およびbunのサーバー側のフェッチAPI呼び出しは制限が少なく、サーバーからデータをリクエストできます。つまり、サードパーティのAPIは

  になります

キーまたはOAuthを使用して、何らかの認証または承認が必要です

は、1分あたりの呼び出しに1回しか通じていないなど、最大リクエストのしきい値を持っています。

訪問に対して商業料金が請求されます
• サーバーサイドのfetch（）呼び出しを使用して、CORやCSPの問題を回避できるように、クライアントリクエストをプロキシクライアントリクエストできます。とはいえ、責任あるサイバー市民であり、何千ものリクエストを伴う爆弾サービスではなく、彼らがクラッシュする可能性があることを忘れないでください！
カスタムフェッチリクエスト

上記の例では、URIのデータをリクエストします

https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455。表面下では、JavaScriptは、メソッド、ヘッダー、ボディテキストなど、リクエストの詳細を表すリクエストオブジェクトを作成します。

fetch（）は、2つのパラメーターを受け入れます

リソース - 文字列またはURLオブジェクト、および 他の要求設定を含むオプションのオプションパラメーター

例：

オプションオブジェクトは、node.jsまたはクライアントコードで次のプロパティを設定できます。

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

リクエストオブジェクトを作成し、fetch（）に渡すことを選択できます。これは、事前に定義されたAPIエンドポイントを定義できる場合、または一連の同様のリクエストを送信できる場合に役立ちます。

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

（長さが長すぎるため、次のコンテンツが省略されているため、コアコンテンツは上記で要約されています。必要に応じて、HTTPヘッダー処理、プロミス処理、処理、応答などの残りの部分を処理し続けることができます。分析、中絶などのリクエストなど）

概要

node.js（17以下）の古いバージョンを使用している場合を除き、Fetch APIはサーバーとクライアントのJavaScriptの両方で使用できます。柔軟性があり、使いやすく、すべてのランタイムにわたって一貫しています。サードパーティモジュールは、キャッシュ、再試行、ファイル処理など、より高度な機能が必要な場合にのみ必要です。

以上がnode.js、deno、およびbunでフェッチAPIを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。