#背景
Reactからjson形式のAPIを利用する方法として下記のような方法が挙げられている。 (Reactに限った書き方ではないが)
useApi.js
1 fetch('http://example.com/api/')
2 .then((response) => response.json())
3 .then((response) => {
4 console.log(response.hoge);
5 })
しかし、データ(response.hoge)のみを利用するのであれば、2行目は不要なのでは？と思い、コメントアウトした。
useApi.js
1 fetch('http://example.com/api/')
2 //.then((response) => response.json())
3 .then((response) => {
4 console.log(response.hoge);
5 })
しかし、
useApi.js
4 console.log(response.hoge);
がundefinedとなった。
2行目の有無で3行目の引数の中身が変わっているような挙動だ。
#調べた結果
Promiseの.then(というより、アロー関数)には、下記の特徴があるようだ。
- 単文の場合は、{}を省略可能。
- {}を省略した場合は、単文の処理結果をPromiseでwrapしたもの(?)が自動でreturnされる。
この特徴をメソッドチェーンとして活用したのが冒頭のコードとなっている。
ちなみに、自分で
useApi_2.js
1 fetch('http://example.com/api/')
2 .then((response) => {
3 const res_json = response.json()
4 console.log(res_json.hoge);
5 })
としても同じ実行結果にはならない。(Promiseでwrapしていないため)
#結論
自分でPromise返す処理を書くより、メソッドチェーンを活用したほうが楽。
useApi.js
1 fetch('http://example.com/api/')
2 .then((response) => response.json())
3 .then((response) => {
4 console.log(response.hoge);
5 })
#参考にさせていただいたサイト様