Error handeling.

src/components/Table.vue

@@ -5,7 +5,7 @@
     <button v-on:click="initHand()">Tirer des cartes</button>
     <div v-if="cards != null && cards.length > 0">
       <h2>Cartes</h2>
-      <div v-for="card in cards" v-bind:key="card">
+      <div v-for="card in cards" v-bind:key="JSON.stringify(card)">
         {{card}}
       </div>
       <button v-on:click="sortMyHand()">Tirer des cartes</button>
@@ -14,7 +14,7 @@
       <h2>Cartes Triées</h2>
       <h3><em>Shape order : {{sortResult.shapeOrder}}</em></h3>
       <h3><em>Number order : {{sortResult.numberOrder}}</em></h3>
-      <div v-for="card in sortResult.sortedCards" v-bind:key="card">
+      <div v-for="card in sortResult.sortedCards" v-bind:key="JSON.stringify(card)">
         {{card}}
       </div>
     </div>
@@ -36,12 +36,17 @@ export default {
   methods: {
     initHand() {
       this.sortResult = null;
-      getHand().then(r => {
+      this.cards = null;
+      getHand().catch(() => {
+        window.alert("Deck not full enough")
+      }).then(r => {
         this.cards = r;
       })
     },
     sortMyHand() {
-      sortHand(this.cards).then(r => {
+      sortHand(this.cards).catch(() => {
+        window.alert("Can't sort cards")
+      }).then(r => {
         this.sortResult = r;
       });
     },

src/services/DeckService.js

@@ -1,6 +1,10 @@
 export async function getHand() {
   const response = await fetch('http://localhost:8080/api/deck/hand');
-  return await response.json();
+  if (response.status >= 200 && response.status <= 299) {
+    return  await response.json();
+  } else {
+    throw Error(response.statusText);
+  }
 }
 
 export async function sortHand(hand) {
@@ -9,12 +13,15 @@ export async function sortHand(hand) {
     headers: {'Content-Type': 'application/json'},
     body: JSON.stringify(hand)
   })
-  return await response.json();
+  if (response.status >= 200 && response.status <= 299) {
+    return  await response.json();
+  } else {
+    throw Error(response.statusText);
+  }
 }
 
 export async function resetDeck() {
-  const response = await fetch(`http://localhost:8080/api/deck:reset`, {
+  return  await fetch(`http://localhost:8080/api/deck:reset`, {
     method: 'PUT'
   })
-  await response;
 }