fetch() の概要

fetch() を使用すると、XMLHttpRequest（XHR）に似たネットワーク リクエストを行うことができます。「 主な違いは、Fetch API では Promise を使用することです。 シンプルな API を使用して、複雑なコールバックを XMLHttpRequest API。

Cloud Shell を Promise JavaScript Promise の概要をご覧ください。

基本的な取得リクエスト

XMLHttpRequest で実装した例を次に示します。 次に fetch を使用します。URL をリクエストしてレスポンスを取得し JSON として渡すだけです。

XMLHttpRequest

XMLHttpRequest には、成功を処理するために 2 つのリスナーが必要です。 エラーのケース、open() と send() の呼び出し。 MDN ドキュメントからの例

function reqListener() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function reqError(err) {
    console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

フェッチ

取得リクエストは次のようになります。

fetch('./api/some.json')
  .then(
  function(response) {
    if (response.status !== 200) {
      console.log('Looks like there was a problem. Status Code: ' +
        response.status);
      return;
    }

    // Examine the text in the response
    response.json().then(function(data) {
      console.log(data);
    });
  }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

fetch() リクエストで XHR と同じ処理を行うには、呼び出しを 1 回だけ行う必要がある 例です。レスポンスを処理するには、まずレスポンスのステータスが JSON としてレスポンスを解析します。fetch() リクエストに対するレスポンスは、 Stream オブジェクトです。つまり、 json() メソッドを呼び出すと、Promise が返されます。 ストリームは非同期で発生します。

レスポンスのメタデータ

上記の例では、リソースのステータスとして Response オブジェクト、 レスポンスを JSON として解析します必要な他のメタデータの処理方法は次のとおりです。 できます。

fetch('users.json').then(function(response) {
    console.log(response.headers.get('Content-Type'));
    console.log(response.headers.get('Date'));

    console.log(response.status);
    console.log(response.statusText);
    console.log(response.type);
    console.log(response.url);
});

レスポンス タイプ

フェッチ リクエストを行うと、レスポンスに response.type が返されます。 /「basic」、 「cors」または 「opaque」。 これら types はリソースの出所を示しており、 レスポンスオブジェクトの扱い方が決まります

ブラウザが同じオリジンのリソースをリクエストすると、レスポンスには レスポンスから表示できる内容を制限する basic 型。

別のオリジンのリソースに対してリクエストを行い、そのオリジンが COR ヘッダーの場合、型は cors です。cors basic レスポンスに似ていますが、使用するヘッダー Cache-Control、Content-Language、Content-Type、Expires、 Last-Modified、Pragma です。

opaque のレスポンスが、CORS を返さない別の生成元から送信されています 使用します。レスポンスが不透明の場合、 返されたデータの読み取りやリクエストのステータスの表示。 リクエストが成功したかどうか。

フェッチ リクエストのモードを定義して、特定のリクエスト タイプのみがアクセスされるようにできます。 解決します設定できるモードは次のとおりです。

• same-origin は、同じ生成元のアセットに対するリクエストに対してのみ成功します。 他のすべてのリクエストは拒否されます。
• cors は、同じ生成元と他の生成元でのアセットのリクエストを許可します。 適切な COR ヘッダーを返す。
• cors-with-forced-preflight がプリフライトを実行します。 チェック 確認する必要があります
• no-cors は、CORS に対応していない他のオリジンにリクエストを送信することを目的としています opaque レスポンスが返されますが、前述のように、これは ウィンドウ グローバル スコープで設定できます。

モードを定義するには、オプション オブジェクトを fetch をリクエストし、そのオブジェクト内でモードを定義します。

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
    .then(function(response) {
    return response.text();
    })
    .then(function(text) {
    console.log('Request successful', text);
    })
    .catch(function(error) {
    log('Request failed', error)
    });

Promise チェーン

Promise の優れた機能の一つは、それらを連結できることです。対象 fetch(): これにより、フェッチ リクエスト間でロジックを共有できます。

JSON API を使用している場合は、ステータスを確認し、 各レスポンスの JSON。次のように、ステータスとタイプを定義することで、 Promise を返す個別の関数で JSON を解析し、 最終データとエラーケースのみを処理するように要求します。

function status(response) {
    if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
    } else {
    return Promise.reject(new Error(response.statusText))
    }
}

function json(response) {
    return response.json()
}

fetch('users.json')
    .then(status)
    .then(json)
    .then(function(data) {
    console.log('Request succeeded with JSON response', data);
    }).catch(function(error) {
    console.log('Request failed', error);
    });

この例では、response.status をチェックする status 関数と、 解決された Promise または Promise を Promise.resolve()、 拒否された Promise を Promise.reject()。 これは fetch() チェーンで呼び出される最初のメソッドです。

Promise が解決されると、スクリプトは json() メソッドを呼び出します。これにより、 response.json() 呼び出しから 2 番目の Promise を返し、 解析された JSON を含むオブジェクト。解析に失敗した場合、Promise は catch ステートメントが実行されます。

この構造により、すべてのフェッチ リクエストでロジックを共有できるため、 維持、読み取り、テストが容易になります

POST リクエスト

ウェブアプリは、POST メソッドで API を呼び出し、 追加のパラメータが必要になります。これを行うには、method と body を設定します。 fetch()オプション内のパラメータ：

fetch(url, {
    method: 'post',
    headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
    })
    .then(json)
    .then(function (data) {
    console.log('Request succeeded with JSON response', data);
    })
    .catch(function (error) {
    console.log('Request failed', error);
    });

取得リクエストで認証情報を送信する

Cookie などの認証情報を使用してフェッチ リクエストを行うには、リクエストの credentials 値を "include" に:

fetch(url, {
    credentials: 'include'
})