トップ JavaScriptに関する質問 [Javascript] async関数内のawaitは、結果が返るまで待っていると認識していますが。

編集履歴

回答編集履歴

誤解を招く部分があったため修正

2022/06/04 01:02

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -46,7 +46,7 @@
 Responseオブジェクトのjson()　メソッドは [Promiseを返します](https://developer.mozilla.org/ja/docs/Web/API/Response/json)。
 したがって、res.json() の戻り値は Promise オブジェクトとなるため、左辺の変数 json は Promise オブジェクトに紐付けられることになります。
-しかし、(この時点で変数 json に紐付けられている) Promise オブジェクト自体には **name キーがない**ので
+しかし、Promise オブジェクト自体には **name キーがない**ので
 次の
 ```
 console.log(json.name);

2022/06/03 21:00

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -19,11 +19,11 @@
 ```
 と表示されます。
-つまり
+つまり、どうやら
 ・res は （undefined ではなく）Response オブジェクト
 ・json は Promise オブジェクト
 ・json.name は（当初確認できたように）undefined
-ということが分かります。
+らしい、ということが分かります。
 まとめると、「『fetch(url)』の結果が返ってくるまで待っていて、
 resに結果が入ってから次の『res.json()』が実行される」、という質問者さんの認識はほぼ合っていますが、

2022/06/03 20:53

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -2,7 +2,7 @@
 ```js
 async function access(url) {
   const res = await fetch(url);
-  console.log('res:' + res); // 追加
+  console.log('res: ' + res); // 追加
   const json = res.json();
   console.log('json: ' + json);  // 修正
@@ -13,7 +13,7 @@
 ```
 として実行すると
 ```
-> "res:[object Response]"
+> "res: [object Response]"
 > "json: [object Promise]"
 > "json.name: undefined"
 ```

2022/06/03 20:51

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -18,14 +18,19 @@
 > "json.name: undefined"
 ```
 と表示されます。
 つまり
 ・res は （undefined ではなく）Response オブジェクト
 ・json は Promise オブジェクト
 ・json.name は（当初確認できたように）undefined
 ということが分かります。
+まとめると、「『fetch(url)』の結果が返ってくるまで待っていて、
+resに結果が入ってから次の『res.json()』が実行される」、という質問者さんの認識はほぼ合っていますが、
+実行したときの結果が違います。
 ---
 なぜ違いが出るのか。
 ① 2番目のコードの処理の流れ

2022/06/03 20:46

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -39,21 +39,21 @@
 const json = res.json();
 ```
 Responseオブジェクトのjson()　メソッドは [Promiseを返します](https://developer.mozilla.org/ja/docs/Web/API/Response/json)。
-したがって、res.json() の戻り値は Response オブジェクトとなるため、左辺の変数 json は Promise オブジェクトに紐付けられることになります。
+したがって、res.json() の戻り値は Promise オブジェクトとなるため、左辺の変数 json は Promise オブジェクトに紐付けられることになります。
 しかし、(この時点で変数 json に紐付けられている) Promise オブジェクト自体には **name キーがない**ので
 次の
 ```
 console.log(json.name);
 ```
- を実行すると undefined と出力されてしまいます。
+を実行すると undefined と出力されてしまいます。
 ---
 ② 最初のコードの処理の流れ
   const res = await fetch(url);
 までは①と同じです。
-変数res には Response オブジェクトが紐付けられています。
+変数res には Response オブジェクトが紐付けられます。
 次の行：

2022/06/03 20:44

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -1,39 +1,32 @@
+2番目のコードで、res とjson と json.nameそれぞれの内容を確認するため下記のように変えてみます。
-まず質問内容について
+```js
+async function access(url) {
+  const res = await fetch(url);
+  console.log('res:' + res); // 追加
+  const json = res.json();
+  console.log('json: ' + json);  // 修正
-> resに結果が入ってから次の「res.json()」が実行される認識ですので、「res」が「undefined」とはならないのでは？という疑問です。
+  console.log('json.name: ' + json.name);  // 追加
+}
-「『res』が『undefined』とはならないのでは？という疑問です」　という文の後に、特に res の内容を確認されてもいなかったことから、この質問は
+const url = 'https://jsonplaceholder.typicode.com/users/1';
-「Promise云々かくかくしかじかで『res』は『undefined』にはならないと思っていたのに、（console.log(json.name)を）試したら undefined になった。なぜ 2番目のコードでは res が undefinedになるのか？」
-という疑問を問うものであると解釈しました。
-これを前提として以下述べます。
+access(url);
-要するに質問として
 ```
-  console.log(json.name);
+として実行すると
-とすると、undefined が表示された。。。なぜ。。。
 ```
+> "res:[object Response]"
+> "json: [object Promise]"
+> "json.name: undefined"
+```
+と表示されます。
+つまり
+・res は （undefined ではなく）Response オブジェクト
+・json は Promise オブジェクト
+・json.name は（当初確認できたように）undefined
-ということのようですが、
+ということが分かります。
-注意深く見ればわかると思いますが、
-上のコードでは「res がundefinedかどうか」は、はっきりとはわからず
- **json.name が undefined であるということ**しかわからないと思いますがいかがでしょう？
-もし「res」自体が「undefined」かどうかを知りたいなら、少なくとも
-console.log(res);
-を試してみなければならないのでは？
- **json.name が undefined であるということだけを見て、res も undefined になっていると結論付けるのは早計です**
 ---
-試してみましょう。
+なぜ違いが出るのか。
-console.log(res);
-とすると [object Promise] と表示されました。
-どうやら res は undefined ではないようですね。
----
-次に、（おそらく質問の本質であるところの）なぜ違いが出るのか。
 ① 2番目のコードの処理の流れ
 ```
@@ -46,8 +39,8 @@
 const json = res.json();
 ```
 Responseオブジェクトのjson()　メソッドは [Promiseを返します](https://developer.mozilla.org/ja/docs/Web/API/Response/json)。
-したがって、変数 json は Promise オブジェクトに紐付けられることになります。
+したがって、res.json() の戻り値は Response オブジェクトとなるため、左辺の変数 json は Promise オブジェクトに紐付けられることになります。
 しかし、(この時点で変数 json に紐付けられている) Promise オブジェクト自体には **name キーがない**ので
 次の
 ```
@@ -58,21 +51,24 @@
 ---
 ② 最初のコードの処理の流れ
+  const res = await fetch(url);
+までは①と同じです。
+変数res には Response オブジェクトが紐付けられています。
-async/await は Promiseのシンタックスシュガーですので
+次の行：
 ```js
 const json = await res.json();
 console.log(json.name);
 ```
-は
+async/await は Promiseのシンタックスシュガーですので、この2行は
 ```js
 res.json().then(json => console.log(json.name));
 ```
-と翻訳されます。
+とほぼ同じです。
 これが実行されると、thenの後の引数「json」には、Promise の解決後のデータ（レスポンスの本文のテキストを JSON として解釈した結果データ）が格納されます。
 具体的には、urlで指定したエンドポイントからのレスポンスJSONです。
-これは name キーを持っています。
+これは name キーを持っていますので、期待する出力となります。
-結果、期待する出力となります。

2022/06/03 16:54

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -33,7 +33,7 @@
 どうやら res は undefined ではないようですね。
 ---
-次に、なぜ違いが出るのか。
+次に、（おそらく質問の本質であるところの）なぜ違いが出るのか。
 ① 2番目のコードの処理の流れ
 ```

2022/06/03 16:52

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -2,7 +2,7 @@
 > resに結果が入ってから次の「res.json()」が実行される認識ですので、「res」が「undefined」とはならないのでは？という疑問です。
 「『res』が『undefined』とはならないのでは？という疑問です」　という文の後に、特に res の内容を確認されてもいなかったことから、この質問は
-「Promise云々かくかくしかじかで『res』が『undefined』にはならないと思っていたのに、（console.log(json.name)を）試したら undefined になった。なぜ 2番目のコードでは res が undefinedになるのか？」
+「Promise云々かくかくしかじかで『res』は『undefined』にはならないと思っていたのに、（console.log(json.name)を）試したら undefined になった。なぜ 2番目のコードでは res が undefinedになるのか？」
 という疑問を問うものであると解釈しました。
 これを前提として以下述べます。

2022/06/03 16:49

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -2,7 +2,7 @@
 > resに結果が入ってから次の「res.json()」が実行される認識ですので、「res」が「undefined」とはならないのでは？という疑問です。
 「『res』が『undefined』とはならないのでは？という疑問です」　という文の後に、特に res の内容を確認されてもいなかったことから、この質問は
-「『res』が『undefined』にはならないと思っていたのに、（console.log(json.name)を）試したら undefined になった。なぜ 2番目のコードでは res が undefinedになるのか？」
+「Promise云々かくかくしかじかで『res』が『undefined』にはならないと思っていたのに、（console.log(json.name)を）試したら undefined になった。なぜ 2番目のコードでは res が undefinedになるのか？」
 という疑問を問うものであると解釈しました。
 これを前提として以下述べます。

2022/06/03 16:48

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -1,7 +1,9 @@
 まず質問内容について
 > resに結果が入ってから次の「res.json()」が実行される認識ですので、「res」が「undefined」とはならないのでは？という疑問です。
+「『res』が『undefined』とはならないのでは？という疑問です」　という文の後に、特に res の内容を確認されてもいなかったことから、この質問は
-「『res』が『undefined』とはならないのでは？という疑問です」　という文の後に、特に res の内容を確認されてもいなかったことから、この質問は「『res』が『undefined』にはならないと思っていたのに、試したら undefined になった。なぜ 2番目のコードでは res が undefinedになるのか？」を問うものであると解釈しました。
+「『res』が『undefined』にはならないと思っていたのに、（console.log(json.name)を）試したら undefined になった。なぜ 2番目のコードでは res が undefinedになるのか？」
+という疑問を問うものであると解釈しました。
 これを前提として以下述べます。

2022/06/03 16:46

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -39,15 +39,15 @@
 ```
 まずこれによりres は Responseオブジェクトに紐つけられます。
-Responseオブジェクトのjson()　メソッドは [Promiseを返します](https://developer.mozilla.org/ja/docs/Web/API/Response/json)。
-したがって、
+そして、次：
 ```
 const json = res.json();
 ```
+Responseオブジェクトのjson()　メソッドは [Promiseを返します](https://developer.mozilla.org/ja/docs/Web/API/Response/json)。
-とした場合、変数 json は Promise オブジェクトに紐付けられることになります。
+したがって、変数 json は Promise オブジェクトに紐付けられることになります。
 しかし、(この時点で変数 json に紐付けられている) Promise オブジェクト自体には **name キーがない**ので
+次の
 ```
 console.log(json.name);
 ```

2022/06/03 16:44

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -47,7 +47,7 @@
 ```
 とした場合、変数 json は Promise オブジェクトに紐付けられることになります。
-しかし、(この時点で変数 json に紐付けられている) Promise オブジェクトは **name キーを持たない**ので
+しかし、(この時点で変数 json に紐付けられている) Promise オブジェクト自体には **name キーがない**ので
 ```
 console.log(json.name);
 ```

2022/06/03 16:37

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -1,11 +1,18 @@
+まず質問内容について
 > resに結果が入ってから次の「res.json()」が実行される認識ですので、「res」が「undefined」とはならないのでは？という疑問です。
+「『res』が『undefined』とはならないのでは？という疑問です」　という文の後に、特に res の内容を確認されてもいなかったことから、この質問は「『res』が『undefined』にはならないと思っていたのに、試したら undefined になった。なぜ 2番目のコードでは res が undefinedになるのか？」を問うものであると解釈しました。
+これを前提として以下述べます。
+要するに質問として
 ```
   console.log(json.name);
-とすると、undefined が表示された。。。
+とすると、undefined が表示された。。。なぜ。。。
 ```
+ということのようですが、
-↑を、注意深く見ればわかると思いますが、
+注意深く見ればわかると思いますが、
-そのコードでは「res がundefinedかどうか」は、はっきりとはわからず
+上のコードでは「res がundefinedかどうか」は、はっきりとはわからず
  **json.name が undefined であるということ**しかわからないと思いますがいかがでしょう？
 もし「res」自体が「undefined」かどうかを知りたいなら、少なくとも
@@ -16,10 +23,16 @@
 ---
+試してみましょう。
 console.log(res);
-とすると [object Promise] と表示されます。
+とすると [object Promise] と表示されました。
+どうやら res は undefined ではないようですね。
 ---
+次に、なぜ違いが出るのか。
 ① 2番目のコードの処理の流れ
 ```
 const res = await fetch(url);

2022/06/03 16:28

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -11,7 +11,7 @@
 もし「res」自体が「undefined」かどうかを知りたいなら、少なくとも
 console.log(res);
 を試してみなければならないのでは？
- **json.name が undefined であるということだけを見て、res も undefined に違いないと結論付けるのは早計です**
+ **json.name が undefined であるということだけを見て、res も undefined になっていると結論付けるのは早計です**
 ---

2022/06/03 16:23

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -1,13 +1,17 @@
 > resに結果が入ってから次の「res.json()」が実行される認識ですので、「res」が「undefined」とはならないのでは？という疑問です。
+```
+  console.log(json.name);
+とすると、undefined が表示された。。。
+```
-注意深く見ればわかると思いますが、
+↑を、注意深く見ればわかると思いますが、
-そのコードでは、「res がundefinedかどうか」ははっきりわからず
+そのコードでは「res がundefinedかどうか」は、はっきりとはわからず
  **json.name が undefined であるということ**しかわからないと思いますがいかがでしょう？
 もし「res」自体が「undefined」かどうかを知りたいなら、少なくとも
 console.log(res);
 を試してみなければならないのでは？
- json.name が undefined であるということだけを見て、res も undefined に違いないと結論付けるのは早計です。
+ **json.name が undefined であるということだけを見て、res も undefined に違いないと結論付けるのは早計です**
 ---

2022/06/03 16:19

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -16,6 +16,7 @@
 とすると [object Promise] と表示されます。
 ---
+① 2番目のコードの処理の流れ
 ```
 const res = await fetch(url);
 ```
@@ -37,6 +38,7 @@
 ---
+② 最初のコードの処理の流れ
 async/await は Promiseのシンタックスシュガーですので
 ```js

2022/06/03 16:17

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -16,17 +16,24 @@
 とすると [object Promise] と表示されます。
 ---
+```
 const res = await fetch(url);
+```
 まずこれによりres は Responseオブジェクトに紐つけられます。
 Responseオブジェクトのjson()　メソッドは [Promiseを返します](https://developer.mozilla.org/ja/docs/Web/API/Response/json)。
+したがって、
+```
 const json = res.json();
+```
-とした場合、変数 json は Promise オブジェクトに紐付けられます。
+とした場合、変数 json は Promise オブジェクトに紐付けられることになります。
-しかし、Promiseオブジェクトは name キーを持たないため
+しかし、(この時点で変数 json に紐付けられている) Promise オブジェクトは **name キーを持たない**ので
+```
+console.log(json.name);
+```
-console.log(json.name); を実行すると undefined と出力されます。]
+ を実行すると undefined と出力されてしまいます。
 ---
@@ -41,6 +48,10 @@
 res.json().then(json => console.log(json.name));
 ```
 と翻訳されます。
+これが実行されると、thenの後の引数「json」には、Promise の解決後のデータ（レスポンスの本文のテキストを JSON として解釈した結果データ）が格納されます。
+具体的には、urlで指定したエンドポイントからのレスポンスJSONです。
+これは name キーを持っています。
 結果、期待する出力となります。