再帰的に関数を呼び出すまとめはじめに最近フロントエンドの勉強をしています。今作っているWebアプリで、Dropboxに保存してある写真を表示するという機能を作りたかったのですが、サーバサイドでAPIを叩き個別に取得して表示させるととても画面レスポンスが遅くなってしまいました。そこでJavascriptで非同期に取得し、順次画面表示させてユーザーの体感速度を早くしようとしたのですが、そこで少しハマってしまったので解決方法を備忘として残しておきます。dropbox-sdk-jsの導入まずはdropbox-sdk-jsを導入します。今回はnpmではなくCDN版のものを使用します。SDK以下をhtmlに記載します。src="https://unpkg.com/dropbox/dist/DropboxTeam-sdk.min.js"></script>フォルダ内アイテム一覧を取得まずは共有リンクを取得したい画像アイテムのリストを取得します。filesListFolderメソッドにフォルダのパスを渡せば取得出来るみたいです。});これはチュートリアルに載っているコードそのままで取得できます。これでresponse.entriesにアイテム一覧が配列で取得できました。一覧が取得できたので、それぞれのアイテムの共有リンクを取得しようと思います。本来なら、共有リンクを作成dbx.sharingCreateSharedLinkWithSettingsの後に共有リンクを取得dbx.sharingListSharedLinksする流れですが、自分の環境だとサーバサイドで共有リンクの作成は完了しているので、リンク取得のみを記述します。});/////////////////////////////////////////以下に共有リンクの配列(urls)を取得した後の処理を記載///////////////////////////////////////JavaScript初心者だった自分は、なんとなくこれで動作しそうだなーと思って、こんなコードを書いたのですが、これが全然うまくいきませんでした。共有リンクが取得できている前提で後の処理を書いても「urlsの中身が空だよー」とエラーになってしまいます。再帰的に関数を呼び出す非同期処理が入っているため順番がめちゃくちゃになってしまうようなので、きっちりと順番順番に処理をしてもらうために、以下のように関数を再帰的に呼び出して処理することにしました。});}まとめJavascriptで非同期の処理を扱う際は、Promiseやasyncなどを使うのが基本みたいですが、ちょっと調べただけではよく理解できなかったので、今回はきれいではないですがとりあえずこんな感じで解決しました。いつか必要になると思うのでasyncについてもいつか勉強しようと思います。〜〜その2〜〜月別アーカイブ参加グループプログラミングはてなブログをはじめよう!ti_takaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。