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 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。
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らしい
Promise
Promise オブジェクトは非同期処理の最終的な完了処理 (もしくは失敗) およびその結果の値を表現します。
Promise インターフェイスは作成時点では分からなくてもよい値へのプロキシです。 Promise を用いることで、非同期アクションの成功や失敗に対するハンドラーを関連付けることができます。これにより、非同期メソッドは、最終的な値を返すのではなく、未来のある時点で値を持つ Promise を返すことで、同期メソッドと同じように値を返すことができるようになります。
そもそも...
そもそもJavaScriptは処理の順序が約束されていない。
console.log("1番目の処理");
// 2番目の処理だけ1秒待つ
setTimeout(() => { console.log("2番目の処理") }, 1000);
console.log("3番目の処理");
// 1番目の処理
// 3番目の処理
// 2番目の処理
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