####やりたいこと
非同期処理のコールバックの中で、別の非同期処理の結果を利用したい
####困っていること
コールバックの中の非同期処理が終わらないまま、もとの非同期処理に戻ってしまい、結果の表示が意図したものと異なる
####コード
javascript
1// DB listener 2boardRef.orderByKey().on('child_added', (data) => { 3 console.log(data.key); 4 var msg = data.child('message').val(); 5 var name = data.child('name').val(); 6 var ts = data.child('timestamp').val(); 7 var uid = data.child('uid').val(); 8 9 // replace newlines with brs 10 msg = msg.replace(/\n/g, '<br>'); 11 12 // get photo 13 var ref = firebase.storage().ref('user-photo/' + uid); 14 ref.getDownloadURL().then(url => { 15 $('table').prepend('<tr><td><img src="' + url + '" class="user-pic"></td><td><b>' + 16 name + ' </b> ' + ts + '<br>' + msg + '</td></tr>'); 17 18 }).catch(error => { 19 $('table').prepend('<tr><td><img src="/images/monster.png" class="user-pic"></td><td><b>' + 20 name + ' </b> ' + ts + '<br>' + msg + '</td></tr>'); 21 }); 22 23})
child_addedイベントは、データベースにデータが追加されるたびに呼ばれますが、consoleに出力しているデータのキーの順番(コード内のconsole.log(data.key)
)と、実際にページに表示される順番が異なっています。
この原因として、child_addedイベントの処理内にref.getDownloadURL()
という非同期処理が入っていることがあると思うのですが、child_addedイベントはPromiseではないので、.then()
でつなげることができず、解決策がわかりません。
よろしくお願いします。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。