TypeScript でフェッチする

fetch は、HTTP 接続を介してリソースを取得できる、グローバルに利用可能なネイティブ ブラウザー関数です。 TypeScript では、fetch 関数を使用して、型指定された応答データを消費できます。

TypeScript の fetch() メソッド

Web API は、Window と WorkerGlobalScope を介してグローバルな fetch メソッドを提供します。 これら 2つのインターフェイスは、fetch メソッドが定義されている WindowOrWorkerGlobalScope を実装します。

したがって、fetch メソッドは、ネットワーク経由でリソースを取得するためのネイティブ ブラウザ機能として識別できます。 通常、fetch メソッドは promise を返します。

したがって、HTTP 応答を処理するには then ハンドラーを使用する必要があります。 fetch メソッドの応答は、古い Jquery.ajax() とは異なります。

promise はネットワーク障害または許可の問題によってのみ拒否されるため、404 や 500 などの HTTP エラーは拒否されません。

fetch メソッドの構文を次に示します。

fetch(resource, [,custom_settings_per_request]);

1. resource - ネットワークから取得するリソースです。 文字列でなければなりません。 基本的に、リソースの URL。
2. custom_settings_per_request - これはオプションのパラメーターです。 HTTP メソッド、ヘッダー、本文など、特定の HTTP リクエストのカスタム設定を渡すことができます。

ToDo オブジェクトの配列を取得するダミーの HTTP エンドポイントを使用してみましょう。 以下は、fetch 呼び出しを行う方法を示しています。

fetch("https://jsonplaceholder.typicode.com/todos");

このリクエストは、Response オブジェクトに解決されるレスポンスを返します。 したがって、then ハンドラを使用してデータを取得する必要があります。

json() メソッドで、レスポンスボディを操作してみましょう。

fetch("https://jsonplaceholder.typicode.com/todos")
.then(
  (response) => response.json()
);

これにより、レスポンス本文データを含む別の Promise が返されます。 したがって、以下に示すように、別の then ハンドラを使用して実際のデータにアクセスできます。

fetch("https://jsonplaceholder.typicode.com/todos")
.then(
  (response) => response.json()
)
.then(
  (toDoListArray) => console.log(toDoListArray)
);

出力：

TypeScript の厳密に型指定されたフェッチ レスポンス

fetch() の欠点は、汎用関数ではないことと、型指定された応答データを使用するのが難しいことです。 したがって、TypeScript でラッパーを使用するとよいでしょう。

同じダミー HTTP エンドポイントを使用して、1つの ToDo アイテムをフェッチしてみましょう。 返される response オブジェクトは次のようになります。

{
  "userId": 1,
  "id": 2,
  "title": "quis ut nam facilis et officia qui",
  "completed": false
}

取得した response オブジェクトを処理する Todo 型を作成しましょう。

// Todo type interface
interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

ジェネリック型の応答で fetch メソッドを処理する新しい関数を作成します。

function fetchToDo<T>(resourceUrl: string): Promise<T> {
  return fetch(resourceUrl).then(response => {
      // fetching the reponse body data
      return response.json<T>()
    })
}

この関数は、データを消費するために呼び出すことができ、応答として型指定された Todo オブジェクトを取得しています。 Todo型変数に直接代入できます。

// Consuming the fetchToDo to retrieve a Todo
fetchToDo<Todo>("https://jsonplaceholder.typicode.com/todos/2")
  .then((toDoItem) => {
    // assigning the response data `toDoItem` directly to `myNewToDo` variable which is
    // of Todo type
    let myNewToDo:Todo = toDoItem;
    // It is possible to access Todo object attributes easily
    console.log('\n id: '+ myNewToDo.id + '\n title: ' + myNewToDo.title + '\n completed: ' + myNewToDo.completed + '\n User Id: ' + myNewToDo.userId);
  });

出力：

"id: 2
title: quis ut nam facilis et officia qui
completed: false
User Id: 1"

この方法論は、POST、DELETE などの任意の HTTP メソッドに使用できます。