Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- # Nuxt.jsにて複数のAPIをPromise.Allで呼び出す方法
- ## 概要
- Nuxt.jsの画面表示時に必要なデータを得るためのAPI呼び出しが増えると画面描画が遅くなる問題を、APIをPromise.allで呼び出すことにより回避する。
- API呼び出し処理を別関数にすることによりリロード処理にも利用可能となる。
- ## 実装サンプル
- コンボボックスの選択肢をAPIから取得するという利用シナリオ。
- ```vue
- <script>
- function getData(app) {
- return Promise.all([
- app.$selectApi.companiesWithBlankList(),
- app.$selectApi.languagesWithBlankList(),
- app.$selectApi.rolesWithBlankList()
- ]).then( ( [companies, languages, roles] ) => {
- const data = {}
- data.companies = companies
- data.languages = languages
- data.roles = roles
- // ここでデータ編集を行って呼び元の処理を削減したりできる
- return Promise.resolve(data)
- })
- }
- export default {
- async asyncData({ app }) {
- const data = await getData(app)
- return {
- editedSelects: {
- companyName: data.companies,
- languageName: data.languages,
- roleName: data.roles,
- },
- }
- },
- data() {
- return {
- editedSelects: {
- companyName: [],
- languageName: [],
- roleName: [],
- },
- }
- },
- method: {
- // リロード処理
- async reload() {
- const data = await getData(this)
- this.editedSelects.companyName = data.companies
- this.editedSelects.languageName = data.languages
- this.editedSelects.roleName = data.roles
- },
- }
- }
- </script>
- ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement