2015-03-31

Fetch APIを触ってみた (GET編)

Fetch API は PromiseベースのXMLHttpRequestといった感じのAPI

Promiseベースのため、thenやcatchを使い、処理を書いていく。

この記事はFirefox 39 Nightlyのfetchを元に書いています。まだStreamではありません。

このエントリーではArrow function を使用するようにします。


fetch("example.com/some.json" {
    "method": "GET",
    "mode": "cors",
    "headers": {"some-header": "value"},
})
    .then((response) => {
        console.log(response) // Response
        console.log(response.status) // statusが表示
        console.log(response.headers.get("Content-Type"))
        response.json()
            .then((data) => {
            console.log("This is json", data);
            }
            .catch((err) => console.error(err));
            }
    })
    .catch((err) => console.error(err))

response.jsonを呼び出すことでjsonとしてデータを取得できるが、そこから返されるのもPromiseなので、 thenとcatchをつかって処理を分けることができます。 response.json以外にもresponse.blob, response.arraybuffer, response.textなどがあります。

response.headers.get(header_name)とすることでHeaderの情報を取得できます。

URLの他にオブジェクトを渡すこともでき、"method", "mode", "headers"などを含めることができる。

"method"はこのリクエストのhttp methodを指定する。(GET, POST, PUTなど) デフォルトではGETになる。

headersはこのリクエストに付属するHeaderである。しかし、XMLHttpRequestと同じように、一部、含められないHeaderがある。

含められないHeaderについてはここが詳しいです。

Forbidden header name - Glossary | MDN

Forbidden response header name - Glossary | MDN

"mode"は以下のものを使用できます。

"same-origin" 同一オリジン以外のリクエストはrejectする
"cors" 適切なCROs Headersを返す他のオリジンも許可する CROs Headersとは
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma

の事を指す。

"cors-with-forced-preflight" 実際のリクエストの前にpreflight checkを行うようにする
"no-cors" 内容が確認できないリクエストであることを示す。(CROs headersがなくstatusやdataを確認できない。[Globalなfetchでは使用できない])

これから、ES6が普及するにつれて、fetchも普及していくと思います。

かなりPOST リクエストに関することも書いてしまったかもしれませんが、POSTについてはまた書くかもしれません。

参考になったエントリー

Fetch API 解説、または Web において "Fetch する" とは何か？ - Block Rockin’ Codes

Introduction to fetch()

2015-03-18

Broadcast Channel APIを触ってみた

Firefox38で実装されているBroadcast Channel APIを触ってみた。感想は、簡単にフレームやタブ、ウィンドウ間の通信ができていい感じ。

この図が示しているように幾つかのcontextがBroadCastチャンネルに接続して、通信を行う。

var broadcast = new BroadcastChannel("broadcast"); //接続、または作成
broadcast.postMessage(data); // データ送信
broadcast.onmessage = function (ev) {
    console.log(ev.data);
} // 送信されたデータの取得

broadcast.close() // 接続の解除

こんなふうに非常に簡単にできる。コンストラクタに渡す引数がChannelのidになり、すでにあるidを渡すと既存のチャンネルに接続できるようだ。