py4web et vue.js

 les interactions avec javascript ne sont pas simples.

py4web mise sur vue.js un framework javascript

vue.js et axios pour les appels des API

un peu de théorie

Lors de la création d’une application Web, il est fréquent que vous souhaitiez utiliser et afficher les données provenant d’une API. Il existe plusieurs manières de le faire, mais une approche très populaire consiste à utiliser axios, un client HTTP basé sur les Promesses.

Promesses:

Les avantages des promesses par rapport à l’utilisation de simples fonctions de rappel pour gérer des opérations asynchrones vont être notamment la possibilité de chainer les opérations asynchrones, la garantie que les opérations vont se dérouler dans l’ordre voulu et une gestion des erreurs simplifiées tout en évitant le « callback hell »

 

Une promesse est un objet (Promise) qui représente la complétion ou l'échec d'une opération asynchrone. La plupart du temps, on « consomme » des promesses et c'est donc ce que nous verrons dans la première partie de ce guide pour ensuite expliquer comment les créer.

En résumé, une promesse est un objet qui est renvoyé et auquel on attache des callbacks plutôt que de passer des callbacks à une fonction. Ainsi, au lieu d'avoir une fonction qui prend deux callbacks en arguments :

 

un bon tuto dans le cours de lucos de alfaro

https://bitbucket.org/luca_de_alfaro/workspace/projects/PY4WEB

voir le cours "lecture_load_images_ajax"

je l'ai un peu bidouillé pour comprendre. 

en ajoutant l' affichage du nom des images.

fait intervenir le controller

où on definit la mécanique

- 2 fonctions :

* "callback"

qui renvoie la liste des url des images

* "get_img"

qui renvoie le contenu (base 64) d'une image

1 vue template ( index)

avec une partie script et une partie présentation

 - scripts :

*  les 2 URL de callback nécessaire à la promesse

* l'invocation du script index.js ( vue)

- présentation : affichage des images

1 javascript vue.js (une application Vue dans js/index.js) : 

compliqué , bien documenté

on initialise une application avec les callbacks à exécuter par l'application de facon asynchrone.

 

Remarque si on attend que toutes les promesses se réalisent avant de poursuivre ca donne une page peu réactive ce qui est contraire à la philosophie asynchrone (*)

==> j'ai retiré le statement

            Promise.all(image_promises).then((r) => {
                    app.vue.done = "All done15";
                    console.log(r); }

 (*) mais c'est toute la subtilité de la chose.

dans certains cas c'est absolument nécessaire, particulièrement pour enchainer une action lorsque on est certain que tout est fini

A noter le javascript est compilé et mis en cache. Si on modifie le script il faut absolument modifier un parametre dans l'appel du script sinon c'est toujours la version en cache qui s'execute. Quoiqu'on fasse ( fermer browser, supprimer l'appli ...)

exemple  : dans la vue d'où est appelé le script

<script>
    let callback_url = "[[=XML(callback_url)]]";
    let getimage_url = "[[=XML(getimage_url)]]";
    let getdefinition_url = "[[=XML(getdefinition_url)]]";
</script>
<script src="js/index.js?v=40"></script>
[[end]]