Fetch API
全然わからん
Fetch では Request と Response が一般的な形で定義されています。またネットワークリクエストに関連する様々なものも定義されています。これらは service worker や Cache API といったリクエストとレスポンスを扱う API や、独自のリクエストを発生させる場面でも利用できるようになるでしょう。また CORS や HTTP オリジンヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。リソースを取得するためのリクエストは、 GlobalFetch.fetch メソッドを呼ぶことで作成できます。このメソッドは Window や WorkerGlobalScope といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。fetch() メソッドは必須の引数を1つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する Response に解決できる Promise (en-US) を返します。第2引数は任意で、 init オプションオブジェクトを渡すことができます。Response を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります。Request() および Response() を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、FetchEvent.respondWith のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。
Fetch API とは
Fetch API とは
jQuery.ajax()
みたいなもん
...だと思っていた。
jQueryやめたい。
手始めに jQuery.ajax() 取り除いたろ。
きっかけ
ajaxをfetchに
置き換えたら
動くやろ
$.ajax('https://weather.tsukumijima.net/api/forecast?city=330010')
.done(response => console.log(JSON.parse(response).location.area)
// => 岡山fetch('https://weather.tsukumijima.net/api/forecast?city=330010')
.then(response => console.log(JSON.parse(response).location.area))
// VM101:1 Uncaught (in promise) SyntaxError戻り値はPromiseらしい
fetchの戻り値はPromise
Promise
?
?
Promise オブジェクトは非同期処理の最終的な完了処理 (もしくは失敗) およびその結果の値を表現します。
Promise インターフェイスは作成時点では分からなくてもよい値へのプロキシです。 Promise を用いることで、非同期アクションの成功や失敗に対するハンドラーを関連付けることができます。これにより、非同期メソッドは、最終的な値を返すのではなく、未来のある時点で値を持つ Promise を返すことで、同期メソッドと同じように値を返すことができるようになります。
そもそも...
Promise
そもそもJavaScriptは処理の順序が約束されていない。
Promiseって何のためにあるの？
console.log("1番目の処理");
// ２番目の処理だけ１秒待つ
setTimeout(() => { console.log("2番目の処理") }, 1000);
console.log("3番目の処理");
// 1番目の処理
// 3番目の処理
// 2番目の処理Promiseはその順序のお約束をするためにある。
- 処理の順序を約束するためにある
- Promiseオブジェクトの状態は以下の3つ
- pending (待機)
- fulfilled (成功)
- rejected (失敗)
- Promiseオブジェクトの状態がpendingから変更された時、それに対応したメソッドのハンドラーが呼ばれる
-
promiseに処理をcheinできるメソッドは以下の3つ
- then() ・・・直前の処理が終了した時に処理を実行する、Promiseのステータスによって処理を分けることができる
- catch() ・・・直前の処理が失敗した時に処理を実行する
- finally() ・・・直前の処理が終了した時に処理を実行する、Promiseのステータスによらず処理は同一
Promise
fetch('https://weather.tsukumijima.net/api/forecast?city=330010')
.then(response => console.log(JSON.parse(response).location.area))
// VM101:1 Uncaught (in promise) SyntaxErrorここまでのおさらい
- ここで返却されるresponseはStringではなくPromise
- JSON.parse()の引数にはStringを渡す必要があるのにPromiseを渡しておりSyntaxErrorになるのがわかる
- 返却されたデータがPromiseのどこに格納されているのかがわかれば次に進めそう
deck
By Ryosuke Hiroe
