Flask avec Fetch

**PLUB_85** · 31/01/2024, 11h44

Bonjour,
j'ai ouvert une discussion sur le forum Micropython (https://github.com/orgs/micropython/discussions/13529) qui ne m'a pas donner de réponse.
Comme cela m'a été suggéré, j'ai fait une maquette en Python/Flask équivalente à mon projet pour des tests.
Ma question est la suivante : comment interagit Fetch avec Flask dans le cas présenté.
Il n'y a pas de gestion de la réponse ni des datas

Code Python:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
from flask import Flask, render_template
app = Flask(__name__)
 
led=False
 
def toggle():
    global led
    if led:
        print ("Led ON")
    else:
        print ("Led OFF")
    led=not led
    return  
 
@app.route('/')
def index():
    return render_template('index.html',led_value=led)
 
@app.route('/toggle')
def toggle_led():
    print("Receive Toggle Request!")
    led_value=toggle()
    return "OK"
 
app.run()

Code index.js

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function toggleButtonSwitch() {
  fetch("/toggle");
  return;
}

Code index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <script type=text/javascript src="{{ url_for('static', filename= 'js/index.js')}}"></script>
  </head>
  <body>
        <h1>MicroPython Webserver</h1>
        <div>
          <p>Toggle Switch</p>
          <input type="checkbox" id="switch" onclick="toggleButtonSwitch()" {%
          if led_value == 1 %} checked {% endif %}/><label for="switch"
            >Toggle</label>
        </div>
  </body>
</html>

Si quelqu'un a une explication (simple), je suis preneur
Merci d'avance

**wiztricks** · 31/01/2024, 13h34

Envoyé par PLUB_85

Si quelqu'un a une explication (simple), je suis preneur

Il n'y a pas d'explication simple! Vous devez partir d'une documentation flask qui explique comment ça marche.
Puis imaginer comment ce truc va bien pouvoir être utilisé pour faire ce que vous attendez (ou reformuler vos attentes pour que ça puisse être fait avec ou choisir un autre outil pour...).

Envoyé par PLUB_85

Ma question est la suivante : comment interagit Fetch avec Flask dans le cas présenté.

Côté Flask, la fonction ne retourne pas de JSON et côté JavaScript/fetch, çà ne fait rien non plus.
Votre code montre juste que vous n'avez pas lu la documentation (ou pas compris).... Et comme ça ne fait rien, difficile de savoir l'intention qui est derrière ces lignes. Le problème n'est pas dans ce que font ces lignes mais sur le pourquoi faire les avoir écrites!

- W

**PLUB_85** · 31/01/2024, 18h05

La documentation Flask n'explique pas ce que je demande et je n'ai rien trouvé sur le net. J'essaye de comprendre tout simplement ce que j'ai trouvé sur ce site https://github.com/donskytech/microp...odot/tree/main, et plus particulièrement ceci : https://github.com/donskytech/microp...ic/js/index.js
On peut être Expert éminent sénior et ne pas savoir communiquer avec les moins aguerris que soi. Je poserai ma question sur un autre forum plus réceptif
Merci

**umfred** · 31/01/2024, 18h37

a priori tu n'as pas compris les réponses données sur le github.
La route /toggle dans le Flask renvoie juste "OK", donc le fetch récupére cette réponse et le then le prend pour l'afficher dans la console java
Rien ne sera récupéré d'autres que ce que la route renvoie.

Si tu veux connaitre la valeur de la led, il faut appeler led_module.get_value() dans la route, puis ensuite retourner l'info dans le return. Selon que tu veux renvoyé, soit tu renvoies cette valeur, soit tu renvoies une liste ou mieux un dictionnaire contenant les différentes valeurs.
Coté JS avec la réponse, tu auras le type d'info que tu as renvoyé et donc à traiter dans le .then par exemple.

**PLUB_85** · 01/02/2024, 10h04

Merci de cette non réponse. Tout ce que tu me dis a été vu dans la discussion Micropython.
Ma question est TRÈS simple: Que fait fetch("/toggle");(Javascipt) avec @app.route('/toggle')
def toggle_led(): de Python/Flask.
L'utilisation de la ligne fetch("/toto") seule n'est pas documentée

**fred1599** · 01/02/2024, 10h23

Bonjour,

Tout cela est dans la doc de l'API Fetch, qui annonce que la méthode de la requête par défaut est GET.

Votre question est trop généraliste et amène naturellement à la documentation de l'API ou celle proposée par wiztricks concernant fetch et flask.

Si vous voulez des précisions, dîtes ce que vous avez compris de manière générale et posez votre question de manière précise... on ne va pas inventer ce qui n'est pas dans la doc, et pour savoir ce que fait fetch seule, rien de plus logique que de tester par la pratique, utilisez un debugger et vérifiez par exemple que vous entrez dans la route "/toogle".

**papajoker** · 01/02/2024, 12h35

bonjour

Envoyé par PLUB_85

Que fait fetch("/toggle");(Javascipt) avec @app.route('/toggle')

La question ne devrait pas être posée

cette fonction javascript ne fait que récupérer le contenu retourné par ton url http://localhost/toggle.

Ici, nous sommes un forum python, donc ta première démarche doit être d'écrire et SURTOUT tester ta partie flask. Ce que tu n'as même pas fait

Tu dois au minimum lancer cette "page" dans ton navigateur pour voir si le retour est conforme à tes souhaits. (peut-être que tu désires avoir alternativement 1 puis 0 ???)

Une fois que cette adresse retourne ce qu'il faut, ensuite, tu peux tester/écrire ta partie javascript. Ici, elle ne fait rien...
note: écrire une variable "led_value" coté python ne va jamais créer par magie une variable "led_value" coté javascript !

-----------

On peut voir avec ton code que tu n'as aucune compétence python , aucune flask et aucune javascript donc tu nous en demande beaucoup trop

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
def toggle():
    global led
    # ton code
    return  
 
@app.route('/toggle')
def toggle_led():
    led_value=toggle()

Rien qu'au niveau python (même pas flask), ceci est niveau grand grand débutant ... tu écris une fonction qui retourne rien et, tu essayes de récupérer une chose ... que tu n'utilises pas

**umfred** · 01/02/2024, 13h02

Envoyé par PLUB_85

Merci de cette non réponse. Tout ce que tu me dis a été vu dans la discussion Micropython.
Ma question est TRÈS simple: Que fait fetch("/toggle");(Javascipt) avec @app.route('/toggle')
def toggle_led(): de Python/Flask.
L'utilisation de la ligne fetch("/toto") seule n'est pas documentée

euh bah si on a répondu .... mais tu ne comprends pas ....

Mais peut-être avec 3 explications supplémentaires

fetch ici appele la route et récupère le résultat de celle-ci.....

fetch("/route") n'a d'intéret que de faire un get sur la route, sans en utiliser le route
c'est comme faire un input('attente') qui affichera 'attente', et attendra une saisie utilisateur sans rien en faire derrière.

une page sur fetch https://fr.javascript.info/fetch

Flask avec Fetch

Python

Discussions similaires

Partager

Partager