SHARE
TWEET

Untitled

a guest Jun 12th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. # Nuxt.jsにて複数のAPIをPromise.Allで呼び出す方法
  2.  
  3. ## 概要
  4. Nuxt.jsの画面表示時に必要なデータを得るためのAPI呼び出しが増えると画面描画が遅くなる問題を、APIをPromise.allで呼び出すことにより回避する。
  5.  
  6. API呼び出し処理を別関数にすることによりリロード処理にも利用可能となる。
  7.  
  8. ## 実装サンプル
  9. コンボボックスの選択肢をAPIから取得するという利用シナリオ。
  10.  
  11. ```vue
  12. <script>
  13. function getData(app) {
  14.   return Promise.all([
  15.     app.$selectApi.companiesWithBlankList(),
  16.     app.$selectApi.languagesWithBlankList(),
  17.     app.$selectApi.rolesWithBlankList()
  18.   ]).then( ( [companies, languages, roles] ) => {
  19.     const data = {}
  20.     data.companies = companies
  21.     data.languages = languages
  22.     data.roles = roles
  23.     // ここでデータ編集を行って呼び元の処理を削減したりできる
  24.     return Promise.resolve(data)
  25.   })
  26. }
  27.  
  28. export default {
  29.   async asyncData({ app }) {
  30.     const data = await getData(app)
  31.     return {
  32.       editedSelects: {
  33.         companyName: data.companies,
  34.         languageName: data.languages,
  35.         roleName: data.roles,
  36.       },
  37.     }
  38.   },
  39.   data() {
  40.     return {
  41.       editedSelects: {
  42.         companyName: [],
  43.         languageName: [],
  44.         roleName: [],
  45.       },
  46.     }
  47.   },
  48.   method: {
  49.     // リロード処理
  50.     async reload() {
  51.       const data = await getData(this)
  52.       this.editedSelects.companyName = data.companies
  53.       this.editedSelects.languageName = data.languages
  54.       this.editedSelects.roleName = data.roles
  55.     },
  56.   }
  57. }
  58. </script>
  59. ```
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top