読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

Microsoft Edge で Fetch API を使ってみる

開発 JavaScript Microsoft Edge

以前は 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 でコンテントタイプやクッキー、カスタムヘッダーなど付加することができます。

スポンサーリンク