KnowHub

レスポンスAPI

ブラウザーは、サーバー応答を構築するための Response() コンストラクターをネイティブに提供します。

fetch() メソッドは Response オブジェクトを返します。

##施工方法

Response() をコンストラクターとして呼び出すと、Response インスタンスが返されます。

//定義する
new Response([body:Object, [init : Object]]): レスポンス

// 使用法
newResponse()
新しい応答(本体)
新しい応答(本体、オプション)

2 つのパラメータを取りますが、どちらもオプションです。

最初のパラメータ body はサーバーから返されたデータ本体を表し、ArrayBuffer、ArrayBufferView、Blob、FormData、ReadableStream、String、URLSearchParams のいずれかのタイプである必要があります。

2 番目のパラメータ init は、サーバーから返されるデータ ヘッダーを表すオブジェクトです。その型は次のように記述されます。

{
  ステータス:番号
  statusText: 文字列
  ヘッダー:オブジェクト
}

以下に例を示します。

const myBlob = 新しい Blob();
const myOptions = { ステータス: 200, statusText: "OK" };
const myResponse = 新しい応答(myBlob, myOptions);

JSON データが返される場合は、文字列に変換して返す必要があることに注意してください。

定数データ = {
  こんにちは世界"、
};

const json = JSON.stringify(data, null, 2);

const result = new Response(json, {
  ヘッダー: {
    "コンテンツタイプ": "application/json;charset=UTF-8",
  }、
});

上の例では、JSON データを返す Response オブジェクトを構築するには、JSON.stringify() メソッドを使用して最初のパラメータを文字列に変換する必要があります。

##インスタンスのプロパティ

本体、本体使用済み

body プロパティはデータ本体を表し、読み取り専用の ReadableStream オブジェクトです。

const res = await fetch('/fireworks.ogv');
const リーダー = res.body.getReader();

結果をみましょう。
while (!(result = await Reader.read()).done) {
  console.log('チャンク サイズ:', result.value.byteLength);
}

上記の例では、まずボディリーダーを作成し、その後データを毎回読み込み、そのデータのフィールド長を出力します。

body は Stream オブジェクトであり、一度しか読み取ることができないことに注意してください。すべてのデータを取り出した後は、2 回目からは読み込むことができません。

bodyused プロパティは、body プロパティが読み取られたかどうかを示す読み取り専用のブール値です。

ヘッダー

headers プロパティは、サーバーから返されたデータ ヘッダーを表し、読み取り専用の Headers オブジェクトです。

const res = await fetch('/flowers.jpg');
console.log(...res.headers);

上の例では、リクエストを行った後、サーバー応答のすべてのヘッダーである「res.headers」属性を展開して出力します。

わかりました

「ok」属性は、サーバーから返されたステータス コードが成功したかどうかを示すブール値です (200 ～ 299)。この属性は読み取り専用です。

const res1 = await fetch('https://httpbin.org/status/200');
console.log(res1.ok); // true

const res2 = await fetch('https://httpbin.org/status/404');
console.log(res2.ok); // false

リダイレクトされました

「redirected」は、サーバーから返されたステータス コードがジャンプ タイプ (301、302 など) であるかどうかを示すブール値です。この属性は読み取り専用です。

const res1 = await fetch('https://httpbin.org/status/200');
console.log(res1.redirected); // false

const res2 = await fetch('https://httpbin.org/status/301');
console.log(res2.redirected); // true

ステータス、ステータステキスト

「status」属性は、サーバーから返されるステータス コードを表す数値です。この属性は読み取り専用です。

const res1 = await fetch('https://httpbin.org/status/200');
console.log(res1.status); // 200

const res2 = await fetch('https://httpbin.org/status/404');
コンソール.log(res2.status); // 404

statusText 属性は、サーバーから返されたステータス コードの説明テキストを表す文字列です。たとえば、ステータス コード 200 の 'statusText' は通常 'OK' ですが、空の場合もあります。

タイプ

「type」属性は、サーバー応答のタイプを示す読み取り専用の文字列です。その値は、basic、cors、default、error、opaque、opaqueredirect です。

URL

url 属性はサーバー パスを表す文字列です。この属性は読み取り専用です。リクエストがリダイレクトされる場合、このプロパティはリダイレクトされた URL になります。

##インスタンスメソッド

データ読み取り

次のメソッドは、サーバー応答のメッセージ本文を取得し、返されたデータのさまざまな種類に応じて対応するメソッドを呼び出すことができます。

  • .json(): Promise オブジェクトを返し、最後に解析された JSON オブジェクトを取得します。
  • .text(): Promise オブジェクトを返し、最終的に文字列を取得します。
  • .blob(): Promise オブジェクトを返し、最終的に、特定のファイルの元のデータ全体を表すバイナリ Blob オブジェクトを取得します。
  • .arrayBuffer(): Promise オブジェクトを返し、最後に固定長バイナリ データを表す ArrayBuffer オブジェクトを取得します。
  • .formData(): Promise オブジェクトを返し、最後にキーと値のペアの形式でフォーム送信データを含む FormData オブジェクトを取得します。

以下は、「.json()」メソッドを使用してサーバーから JSON データを取得する例です。他のいくつかのメソッドの使用法も同様です。

非同期関数 getRedditPosts() {
  試す {
    const 応答 = await fetch('https://www.reddit.com/r/all/top.json?limit=10');
    const data = 応答を待ちます.json();
    const posts = data.data.children.map(child => child.data);
    console.log(posts.map(post => post.title));
  } キャッチ (エラー) {
    コンソール.エラー(エラー);
  }
}

以下は、.blob() メソッドを使用してサーバーからバイナリ ファイルを取得する例です。

非同期関数 displayImageAsync() {
  試す {
    const 応答 = await fetch('https://www.example.com/image.jpg');
    const blob = 応答を待ちます。blob();
    const url = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = URL;
    document.body.appendChild(img);
  } キャッチ (エラー) {
    コンソール.エラー(エラー);
  }
}

以下は、.arrayBuffer() メソッドを使用して、サーバーからオーディオ ファイルを取得し、解凍して直接再生する例です。

非同期関数 playAudioAsync() {
  試す {
    const 応答 = await fetch('https://www.example.com/audio.mp3');
    const arrayBuffer = 応答を待ちます。arrayBuffer();
    const audioBuffer = await new AudioContext().decodeAudioData(arrayBuffer);
    const source = new AudioBufferSourceNode(new AudioContext(), { バッファ: audioBuffer });
    source.connect(new AudioContext().destination);
    ソース.スタート(0);
  } キャッチ (エラー) {
    コンソール.エラー(エラー);
  }
}

クローン()

clone() メソッドは、Response オブジェクトをコピーするために使用されます。

const res1 = await fetch('/flowers.jpg');
const res2 = res1.clone();

コピー後、一方のオブジェクトのデータを読み取っても、もう一方のオブジェクトには影響しません。

静的メソッド

応答.json()

Response.json() は Response インスタンスを返します。インスタンス オブジェクトのデータ本体はパラメータとして JSON データです。データ ヘッダーの Content-Type フィールドは自動的に application/json に設定されます。

応答.json(データ)
Response.json(データ、オプション)

Response.json() は基本的に Response() コンストラクターのバリアントです。

以下に例を示します。

const jsonResponse1 = Response.json({ my: "データ" });

const jsonResponse2 = Response.json(
  { 一部: 「データ」、その他: 「情報」 },
  { ステータス: 307, statusText: "一時リダイレクト" },
);

Response.error()

Response.error() は、エラーを示すサーバー応答を構築するために使用され、主に Service Worker で送信の拒否を示すために使用されます。

self.addEventListener('fetch', (イベント) => {
  const url = 新しい URL(event.request.url);
  if (url.pathname === '/flowers.jpg') {
    イベント.respondWith(Response.error());
  }
});

Response.redirect()

Response.redirect() は、ジャンプを表すサーバー応答を構築するために使用され、主にサービスワーカーで他の URL へのジャンプを表すために使用されます。

応答.リダイレクト(url)
Response.redirect(url, ステータス)

このメソッドの最初のパラメータ url はリダイレクトされるターゲット URL で、2 番目のパラメータはステータス コードで、通常は 301 または 302 (デフォルト値) です。

Response.redirect("https://www.example.com", 302);

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章