thenに渡す関数の戻り値を使ってうまくハンドリングできます。
- 値を返す: 即刻Promise.resolve(戻り値)が実行されたものとして処理
- 例外を投げる: 即刻Promise.reject(err)が実行されたものとして処理
- Promiseを返す: 戻り値のPromiseのresolve or rejectを待つ
defghi1977さんの書き方はpromise→promiseという感じでしたが、
snapshor.val()
で値を取り出すthenを挟んでみます。
JavaScript
1function setStudyroomName(user) {
2 firebase.database().ref('/on-break/' + user.uid + '/room-id').once('value')
3 .then(function(snapshot) { // データの読み込み
4 return snapshot.val();
5 }).then(function(id) { // studyroomIdを使って再度データを読み込む
6 return firebase.database().ref('/study-rooms/' + id + '/name').once('value');
7 }).then(function(snapshot) {
8 return snapshot.val();
9 }).then(function(text) {
10 $('#studyroomName').text(text);
11 });
12)
snapshor.val()
は同期処理ですが、ちゃんと動いているのが確認出来るはずです。
間に加工用関数やバリデーション用の関数を作っておくなど工夫すると、
可読性を高めたり、エラーになりそうな処理を予め弾くといった様々な事ができるようになります。
質問文のコードを処理を買えずに書き方を変えてみました。
JavaScript
1var connectTo = function(url) {
2 return firebase.database().ref(url).once('value');
3}
4var studioRoomUrl = function(snapshot) {
5 var id = snapshot.val();
6 return '/study-rooms/' + id + '/name';
7}
8var outputName = function(snapshot) {
9 var name = snapshot.val();
10 $('#studyroomName').text(name);
11}
12
13function setStudyroomName(user) {
14 connectTo('/on-break/' + user.uid + '/room-id')
15 .then(studioRoomUrl)
16 .then(connectTo)
17 .then(outputName);
18)
こんな風に関数化しておけば最後の部分はシンプルに出来ますね。
関数化したものは別ファイルに追い出してしまってからimportで取ってくる設計に出来るので、
大規模な開発では意外と使えるテクニックだと思います。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。