Wonder Code

プログラミングとか、PCについてが多いかな

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()