回答編集履歴
2
Async functionsの説明を追加
test
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
結果が意図したものと異なる原因は「コールバック中の非同期処理が終わらないまま、**次のコールバックが始まってしまう**」からです。
|
|
2
2
|
|
|
3
3
|
つまり、直前の非同期処理が終わってからコールバックが始まるようにすればよいかと思います。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
コード中に現れる`async`というのは[非同期関数の文法](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/async_function)で、実行すると`Promise`を生成することができます。生成された`Promise`は関数が`return`もしくは処理が最後まで到達するとresolveされます。
|
|
8
|
+
|
|
9
|
+
`async`キーワード付きの関数内では[await演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/await)を使用することができ、演算子の対象に指定した`Promise`のresolve/rejectまで関数の処理を一時停止することができます。
|
|
10
|
+
|
|
11
|
+
|
|
4
12
|
|
|
5
13
|
|
|
6
14
|
|
1
prevTaskのPromiseがresolveされないコードだったのを修正
test
CHANGED
|
@@ -6,19 +6,29 @@
|
|
|
6
6
|
|
|
7
7
|
```javascript
|
|
8
8
|
|
|
9
|
-
// ↓ES2015 Promiseの場合は `var prevTask = Promise.resolve();`
|
|
10
|
-
|
|
11
|
-
var prevTask =
|
|
9
|
+
var prevTask = Promise.resolve();
|
|
12
10
|
|
|
13
11
|
|
|
14
12
|
|
|
15
13
|
boardRef.orderByKey().on('child_added', (data) => {
|
|
16
14
|
|
|
17
|
-
prevTask = prevTask.
|
|
15
|
+
prevTask = prevTask.finally(async () => {
|
|
18
16
|
|
|
19
17
|
console.log(data.key);
|
|
20
18
|
|
|
21
|
-
//
|
|
19
|
+
// 中略
|
|
20
|
+
|
|
21
|
+
// ↓`await`を追加して非同期処理の完了を待つ
|
|
22
|
+
|
|
23
|
+
await ref.getDownloadURL().then(url => {
|
|
24
|
+
|
|
25
|
+
// ...
|
|
26
|
+
|
|
27
|
+
}).catch(error => {
|
|
28
|
+
|
|
29
|
+
// ...
|
|
30
|
+
|
|
31
|
+
});
|
|
22
32
|
|
|
23
33
|
});
|
|
24
34
|
|