비동기 요청 배열 처리 > await + Promise.all

admin/pages/product.vue

@@ -11,8 +11,7 @@
             <div class="a-spacing-top-medium">
               <label for="">Category</label>
               <select  class="a-select-option">
-                <option value="1">1</option>
-                <option value="2">2</option>
+                <option v-for="category in categories" :key="category._id" :value="category._id">{{ category.type }}</option>
               </select>
             </div>
 
@@ -20,8 +19,7 @@
             <div class="a-spacing-top-medium">
               <label for="">Owner</label>
               <select  class="a-select-option">
-                <option value="1">1</option>
-                <option value="2">2</option>
+                <option v-for="owner in owners" :key="owner._id" :value="owner._id">{{ owner.name }}</option>
               </select>
             </div>
 
@@ -72,6 +70,21 @@
 
 <script>
 export default {
+  async asyncData( { $axios }) {
+    try {
+      let categories = $axios.$get('http://localhost:3000/api/categories')
+      let owners = $axios.$get('http://localhost:3000/api/owners')
 
+      const [catResponse, ownerResponse] = await Promise.all([categories, owners])
+
+      console.log(catResponse)
+      return {
+        categories: catResponse.categories,
+        owners: ownerResponse.owners
+      }
+    } catch (err) {
+      console.log(err)
+    }
+  }
 }
 </script>