logo

TechCodeview

JavaScript での API の取得と例

JavaScriptfetch()>サーバーからリソースを取得するために使用されるメソッド。これは、リクエストに対するサーバーの応答をカプセル化する Response オブジェクトに解決される Promise を返します。fetch()>通常はデータのフェッチに使用される GET リクエストと、 役職 リクエスト。データをサーバーに投稿するために使用されます。

さらに、 fetch()> 高度な機能をシームレスに統合 HTTP などの機能 クロスオリジンリソース共有 (CORS) などの拡張機能を備えており、セキュリティと相互運用性が強化されて Web 開発エクスペリエンスが強化されます。



注: Fetch API には、さまざまなソースからデータをフェッチするために使用される fetch() メソッドが付属しています。

構文：

Javaでのリスト作成 
fetch('url') // api for the get request .then(response =>response.json()) .then(data => console.log(data));>>

パラメーター：



  • URL: リクエストの送信先となる URL。
  • オプション: プロパティの配列です。それは オプション パラメータ。利用可能なオプションは次のとおりです。
    • 方法： リクエストのHTTPメソッドを指定します。 (GET、POST、PUT、または DELETE を使用できます)
    • ヘッダー
    • 体： リクエストとともに送信されるデータ。
    • モード： リクエストモードを指定します(例: コルス、 nocor、同一起源など)
    • 資格 : リクエストでユーザー資格情報 (Cookie、認証ヘッダーなど) を送信するかどうかを指定します。

JavaScript fetch() メソッドの例

fetch メソッドの例をいくつか見てみましょう。これらの例は、JavaScript の fetch メソッドを完全に理解するのに役立ちます。

1 。フェッチを使用したリクエストの取得

この例では、fetch メソッドで Get リクエストを行う方法を示します。

注記： オプションを指定しないと、Fetch は常に get リクエストとして機能します。



JavaScript 
// API for get requests let fetchRes = fetch( 'https://jsonplaceholder.typicode.com/todos/1');   // FetchRes is the promise to resolve // it by using.then() method fetchRes.then(res =>res.json()).then(d => { console.log(d) })>>

出力：

説明：

  1. JS fetch() 関数は、GET リクエストを URL https://jsonplaceholder.typicode.com/todos/1 に送信するために使用されます。この関数は、リクエストに対する応答を表す Response オブジェクトに解決される Promise を返します。
  2. then() メソッドは、応答を非同期的に処理するために fetch() 呼び出しにチェーンされます。 then() に渡されるコールバック関数内で、res.json() メソッドが呼び出され、応答本文を JSON として解析します。このメソッドは、解析された JSON データに解決される Promise も返します。
  3. 解析された JSON データを処理するために、別の then() メソッドがチェーンされます。コールバック関数内で、解析された JSON データ d が console.log() を使用してコンソールに記録されます。

2 。フェッチを使用して JSON データをポストする

この例では、JavaScript の fetch() API を使用して JSON データをアップロードしました。リクエスト本文をデータの JSON 文字列化バージョンに設定し、JSON を送信していることを示す適切なヘッダーを設定できます。

以下のオプションを指定すると、フェッチを使用してポスト リクエストを行うことができます。

let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }>

post リクエストの構文を確認した後、fetch メソッドで post リクエストを使用する方法を示す以下の例を見てください。

JFX Java チュートリアル
JavaScript 
// Your JSON data const jsonData = { key1: 'value1', key2: 'value2' }; // Set up options for the fetch request const options = {  method: 'POST',  headers: {  'Content-Type': 'application/json' // Set content type to JSON  },  body: JSON.stringify(jsonData) // Convert JSON data to a string and set it as the request body }; // Make the fetch request with the provided options fetch('https://api.example.com/upload', options)  .then(response =>{ // リクエストが成功したかどうかを確認します if (!response.ok) { throw new Error('ネットワーク応答は正常ではありません');  } // レスポンスを JSON として解析します return response.json();  }) .then(data => { // JSON データを処理します console.log(data); }) .catch(error => { // フェッチ中に発生したエラーを処理します console.error('フェッチ エラー: '、 エラー）;  }）;>>

説明：

  • JSON データを定義します。
  • メソッドを「POST」に設定し、Content-Type ヘッダーを「application/json」に設定し、本文をデータの JSON 文字列化バージョンに設定するなど、フェッチ リクエストのオプションを設定します。
  • fetch() 関数を使用して、指定されたオプションを使用してフェッチ リクエストを作成します。
  • コードの残りの部分は以前と同じままで、応答とフェッチ中に発生するエラーを処理します。

3. フェッチリクエストの中止

使用できます アボートコントローラー そして AbortSignal インターフェイス JavaScript でフェッチリクエストを中止します。

JavaScript 
// Create a new AbortController instance const controller = new AbortController(); const signal = controller.signal; // Make the fetch request with the signal const fetchPromise = fetch('https://api.example.com/data', { signal }); // Timeout after 5 seconds const timeoutId = setTimeout(() =>{ コントローラー.abort(); // フェッチ リクエストを中止します console.log('フェッチ リクエストがタイムアウトしました'); }, 5000); // フェッチリクエストを処理します fetchPromise .then(response => { // リクエストが成功したかどうかを確認します if (!response.ok) { throw new Error('ネットワーク応答は正常ではありません'); } // を解析しますJSON としての応答 return response.json(); }) .then(data => { // JSON データを処理します console.log(data); }) .catch(error => { // 実行中に発生したエラーを処理しますfetch console.error('Fetch error:', error); }) .finally(() => { clearTimeout(timeoutId); // タイムアウトをクリアする });>>

説明：

  • 新しい AbortController インスタンスを作成し、そのシグナルを取得します。
  • 提供されたオプションを指定して fetch() を使用してフェッチ リクエストを作成します。
  • 時間がかかりすぎる場合は、setTimeout() を使用してタイムアウトを 5 秒に設定し、フェッチ要求を中止します。
  • タイムアウト コールバック内で、controller.abort() を呼び出してフェッチ リクエストを中止します。
  • 応答の解析やエラーの処理など、フェッチ リクエストを通常どおり処理します。
  • 最後に、finally() ブロックで、clearTimeout() を使用してタイムアウトをクリアし、タイムアウトが期限切れになる前にフェッチ リクエストが完了した場合にタイムアウトがトリガーされないようにします。

認証情報を含むリクエストの送信

次のような認証情報を含むリクエストを送信するには、 クッキー 、フェッチリクエストに、含める認証情報プロパティを設定できます。

fetch('https://example.com', { credentials: 'include', });>

リクエスト URL が呼び出しスクリプトと同じオリジンにある場合にのみ資格情報を送信したい場合は、資格情報「same-origin」を追加します。

// The calling script is on the origin 'https://example.com' fetch('https://example.com', { credentials: 'same-origin', });>

JavaScript fetch() メソッドの使用例

ここでは、fetch メソッドの使用例をいくつか示します。これらは、初心者の開発者がフェッチを使用するときに直面する一般的な問題です。

1. JavaScript Fetch API を使用してデータを取得する方法

JavaScript Get リクエストは、サーバーからデータを取得するために使用されます。 JavaScript で Fetch API を使用してサーバーからデータを取得するには、目的の URL に対して GET リクエストを作成し、応答を処理します。

2. Fetch APIを使用したGetおよびPostメソッド

fetch() メソッドは、次のようなあらゆるタイプのリクエストで使用できます。 役職 、 得る 、 置く、 そして 消去 、 GET メソッドはフェッチ API を使用します

3. httpリクエストを行うためのFetchとAxiosの違い

Axios は簡単にインストールできるスタンドアロンのサードパーティ パッケージであり、Fetch はほとんどの最新ブラウザに組み込まれています。インストール自体は必要ありません。

サポートされているブラウザ:

JavaScript フェッチは、 ECMAScript6 (ES6) この機能は、次のようなほとんどすべての最新ブラウザでサポートされています。

  • グーグルクローム
  • 角
  • Firefox
  • オペラ
  • サファリ