Microsoft Edge で Fetch API を使ってみる

以前は Blob などバイナリ系の Fetch を行うと Promise の catch すら通りませんでしたが、Build 14342 でエラーが無く実行できるようになりました。

Fetch API とは？

ウェブプラットフォームにおける fetch 処理を統一化するため生まれたらしい。
ちなみに、今後実装される ServiceWorker では XMLHttpRequest は使えないようで、今回ご紹介する Fetch API を使用する必要があります。

参照元。

developer.mozilla.org

英語を読むのが苦でなければこちらに詳しく書かれているため、以下の記事は読む必要はないです。

今回のサンプル

Fetch API

使い方

はじめに

アドレスバーに about:flags を入力し、
JavaScript の項目の「試験的な JavaScript 機能を有効にする」と
Fetch API の項目の「Fetch Javascript API を有効にする」のチェックを有効にしてください。

使ってみる

Headers、Request のオブジェクトを作成して Promise の実装がされている fetch で命令を送ります。
その後、Promise の Then で Response が返ってきます。

以下のコードでは、Headers、Request を省略して Fetch する URL をして指定しています。

var o_t = document.getElementById("output-text")
fetch("fetch.txt").then(function(response) {
    return response.text();
}).then(function(text) {
    o_t.innerText = text
});

Fetch の Body として取り扱えるもの

• ArrayBuffer
• ArrayBufferView
• Blob
• string
• URLSearchParams
• FormData

Fetch で返ってきた Body として取り扱えるメソッド

• arrayBuffer()
• blob()
• json()
• text()
• formData()

Fetch で返ってきた状態を調べる

プロパティ	説明
Response.status	ステータスコード
Response.statusText	ステータスコードの説明
Response.ok	ステータスコード 200 番台が返ってきたとき Boolean で true を返す

リクエスト設定してみる

Fetch はデフォルトで CORS の設定となっています。
今回のサンプルの最下部のものは、リクエスト時に CORS で通信できないようにして、画像取得を失敗させています。

var o_c = document.getElementById("output-nocors")

var headers = new Headers();

var init = { method: 'GET',
            headers: headers,
            mode: 'no-cors',
            cache: 'default' };

var request = new Request('https://az813057.vo.msecnd.net/images/device-family.b414c2a.png', init);

fetch(request, init).then(function(response) {
    return response.blob();
}).then(function(blob) {
    var objectURL = URL.createObjectURL(blob);
    o_c.src = objectURL;
})

また、今回は説明していませんが Headers でコンテントタイプやクッキー、カスタムヘッダーなど付加することができます。