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