回答編集履歴
3
訂正
test
CHANGED
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
|
|
75
75
|
上のコードの asyncTest を実行するとコンソールには "abc" ⇒ "writeLog の実行" という順番に書きこまれます。
|
|
76
76
|
|
|
77
|
-
以下のようにすると、上の回答に述べたように fetchHero5() が即 Promise を返すので、制御が次の writeLog() に移って "writeLog の実行" が書き込まれ、fetchHero5 から返された Promise オブジェクトが fetch で Web API を呼んで 2 秒後に応答が返ってきてから "
|
|
77
|
+
以下のようにすると、上の回答に述べたように fetchHero5() が即 Promise を返すので、制御が次の writeLog() に移って "writeLog の実行" が書き込まれ、fetchHero5 から返された Promise オブジェクトが fetch で Web API を呼んで 2 秒後に応答が返ってきてから "abc" と書き込みます。
|
|
78
78
|
|
|
79
79
|
```
|
|
80
80
|
function asyncTest()
|
2
脱字追加
test
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
}
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
・・・が非同期関数なので Promise を返すというところが、結果が期待したような順番ならない理由だと思います。
|
|
23
|
+
・・・が非同期関数なので Promise を返すというところが、結果が期待したような順番にならない理由だと思います。
|
|
24
24
|
|
|
25
25
|
func2(); で即 Promise が返ってきて完了とみなされ、次の func3(); に制御が移るので、上の「//ajaxの処理」の前に func3(); が実行されたのではないですか。
|
|
26
26
|
|
1
追記
test
CHANGED
|
@@ -37,3 +37,49 @@
|
|
|
37
37
|
```
|
|
38
38
|
|
|
39
39
|
とする他なさそうです。
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
**【追伸】**
|
|
44
|
+
|
|
45
|
+
質問に対するコメントで fetch を使う話をしましたので、質問の「//ajaxの処理」に fetch を使うとどうなるのかを書いておきます。
|
|
46
|
+
|
|
47
|
+
結局は上と同じ話で、async / await の使用は避けられませんが。
|
|
48
|
+
|
|
49
|
+
例として、GET 要求を受けると 2 秒後に以下の JSON 文字列を返す Web API から fetch を使って応答を取得するとします。
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
{"id":5,"name":"abc"}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
JavaScript のコードは以下のようにし、ボタンクリックなどのイベントで asyncTest を実行します。
|
|
56
|
+
|
|
57
|
+
```
|
|
58
|
+
const fetchHero5 = async () => {
|
|
59
|
+
const response = await fetch("/api/values/5")
|
|
60
|
+
const data = await response.json();
|
|
61
|
+
console.log(data.name);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const writeLog = () => {
|
|
65
|
+
console.log("writeLog の実行");
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
async function asyncTest()
|
|
69
|
+
{
|
|
70
|
+
await fetchHero5();
|
|
71
|
+
writeLog();
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
上のコードの asyncTest を実行するとコンソールには "abc" ⇒ "writeLog の実行" という順番に書きこまれます。
|
|
76
|
+
|
|
77
|
+
以下のようにすると、上の回答に述べたように fetchHero5() が即 Promise を返すので、制御が次の writeLog() に移って "writeLog の実行" が書き込まれ、fetchHero5 から返された Promise オブジェクトが fetch で Web API を呼んで 2 秒後に応答が返ってきてから "スライムマン" と書き込みます。
|
|
78
|
+
|
|
79
|
+
```
|
|
80
|
+
function asyncTest()
|
|
81
|
+
{
|
|
82
|
+
fetchHero5();
|
|
83
|
+
writeLog();
|
|
84
|
+
}
|
|
85
|
+
```
|