Explorez l'utilisation des fonctions async/await dans les vues Vuejs/Laravel

Question

Bonjour, j'essaye d'obtenir des informations d'un contrôleur en utilisant une fonction asynchrone, je fais ça dans un composant :

Je dois envoyer des paramètres car j'ai vu des réponses similaires à Mounted() mais ils n'envoient pas de paramètres à la fonction, donc si je n'ajoute pas les paramètres, cela ne fonctionnera pas.

Voir la section :

<tbody>
  <tr v-for="(post, index) in last_month_day" v-bind:index="index">
    <td>{{ index+1 }}</td>
    <td v-for="(post2, index2) in branch_office_posts" v-bind:index="index2">
      $ {{ getTotalIncomes(index+1, post2.branch_office_id) }}
    </td>
  </tr>
</tbody>

Je dois transmettre ces deux paramètres à la fonction : index+1 et post2.branch_office_id

Ensuite je fais ceci dans la section méthode :

methods: {
  async TotalIncomeData(day, branch_office_id) {
    const response = await fetch('/api/collection/total/'+day+'/'+branch_office_id+'?api_token='+App.apiToken)
    return response;
  },
  getTotalIncomes(day, branch_office_id) {
    return this.TotalIncomeData(day, branch_office_id);
},

Cela fonctionne, je veux dire, si vous vérifiez la réponse en utilisant console.log(), elle obtient une valeur. Je sais que je ne peux pas utiliser la fonction d'attente asynchrone dans la vue, c'est pourquoi j'utilise une autre fonction pour appeler cette fonction à l'intérieur de laquelle vous pouvez voir, mais je ne sais pas pourquoi je ne l'utilise pas directement dans la vue, c'est dit :

$ [object Promise]

Donc la valeur n'est pas affichée, donc je veux savoir pourquoi ? Quel est le problème avec le code ? J'ai vraiment besoin d'aide, merci !

Answer 1

Vous pouvez utiliser l'attribut data pour stocker la réponse. La fonction est ensuite appelée pour effectuer la demande, et tout ce qui est lié aux données dans l'interface utilisateur sera mis à jour en conséquence.

La pièce qui vous manque est la .then(...)，它在 fetchdocumentation.

Par exemple :

data: () => ({
  response: null,
}),
methods: {
  fetchData() {
    fetch(`/api/collection/total/${day}/${branch_office_id}?api_token=${App.apiToken}`)
    .then(
      (response) => { this.response = response; }
    );
  },
},

Maintenant, dans votre interface utilisateur, vérifiez si la réponse a fini de revenir, v-if="response" puis affichez-la si nécessaire.