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