0
votes

Configuration appropriée des méthodes de VUE.JS pour faire face à la demande asynchrone Axios

J'ai une application VUE.JS qui récupère des données complexes de l'API avec Axios, puis visualisez ces données. Mon code semble similaire à celui-ci: xxx

Alors je clique sur le bouton dans le modèle, ce bouton appelle LOADDATA () fonction. Cela fonctionne bien, mais la récupération de données prend un certain temps et le traitement prend également un peu de temps et de changement de temps et de variables uniquement lorsque la demande AxIOS est terminée. Donc, je ne vois que seulement récupérer des données message mais pas Données de processus .

Comment puis-je montrer à l'utilisateur quelle étape de traitement des données maintenant? Peut-être que je devrais appeler la fonction processdata () dans de regarder méthodes , mais cela semble survenir à moi.

Mise à jour

i fini avec settimeout () enveloppe. Voir ma réponse ci-dessous.


0 commentaires

3 Réponses :


2
votes

Vue a une fonction appelée NextTick , qui est une fonction asynchrone qui signifie essentiellement "Effectuer le code suivant après la prochaine mise à jour visuelle". J'utilise généralement cette méthode si j'ai des mises à jour visuelles comme celle-ci pour faire.

Je pense que le code dans votre exemple ressemblerait à ceci: xxx

Je ne suis pas complètement sûr . Je travaille habituellement dans des environnements WebPack / compatibles Babel, auquel cas je voudrais simplement effectuer toute la fonction async et écrire: xxx


2 commentaires

Merci, je pense que ce que j'ai besoin. Je vais tester votre option en quelques heures et retourner.


Malheureusement, votre approche ne m'a pas aidé. J'ai posté une réponse qui a une solution à mon problème. Mais honnêtement, je ne comprends pas tout à fait comment ça marche. Si vous avez des idées pourquoi cela est possible, je serai heureux si vous m'expliquez.



0
votes

J'ai essayé d'utiliser nexttick () , comme @ joachim-bà ¸GGLILD m'a conseillé. J'ai même essayé d'utiliser $ forcerUpdate () pour archier cet objectif. Mais pour une raison quelconque qui ne m'a pas clairement clair, l'effet dont j'avais besoin n'a été observé. La console a montré que la valeur a changé. Mais à l'écran et à Vue dévontools Les anciens résultats ont été montrés jusqu'à ce que la demande soit terminée.

J'ai donc décidé de compléter la question avec un exemple et a commencé à créer une démo sur Jsfiddle. Pour montrer le retard de rendu dont j'ai besoin, j'ai utilisé settimeout (((((() => {this.loading = false}, 1000) et il n'y avait pas de problèmes de tout.

i a porté cette approche de mon code et tout a fonctionné parfaitement. Jusqu'à ce que j'ai essayé de supprimer ce Settimeout () . Le problème se pose à nouveau.

Par conséquent, à la fin, j'ai fini par cette conception de code: xxx

Si quelqu'un comprend pourquoi ce comportement se produit, S'il vous plaît compléter ma réponse.


0 commentaires

1
votes

Vous pouvez en lire ici ici ( https: // VUEJS. org / v2 / guide / réactival.html # async-update-file d'attente )

Pouvez-vous essayer de changer votre fonction comme suit: xxx


1 commentaires

Merci, mais cela ne fonctionne pas. J'ai fini par settimeout () enveloppe.