Javascript Fetch() #13529

PatLub85 · 2024-01-26T16:07:29Z

PatLub85
Jan 26, 2024

Hi,
I have a question that concerns javascript more than Micropython, but given the context, I don't think a javascript forum can answer it.
I tested the project of turning the LED of an ESP32 as described on https://github.com/donskytech/micropython-web-server-microdot/tree/main.
Thanks to sophiedegran, discussion #13517, the program now works with Microdot v2.
My question is about the fetch() method used in the small javascript program.
I understood that a first .then() returns a promise which resolves into a Response object and that a second .then() returns the data.
What I have problem with is that in this project the response stays in the console and the second .then() doesn't return any data. What does fetch() do in this particular context?
Here are the different simplified but functional codes
main.py

from microdot import Microdot,Response,send_file
from template import Template
from machine import Pin
import network

ssid = 'MicroPython-AP'
password = '123456789'
ip_ap='192.168.4.10'
# Led build-in ESP32
led_pin = Pin(22, Pin.OUT)

def wifi_ap():
    ap = network.WLAN(network.AP_IF)
    ap.active(True)
    ap.ifconfig((ip_ap,'255.255.255.0','192.168.4.1','192.168.4.1'))
    ap.config(essid=ssid, password=password)
    while ap.active() == False:
         pass
    print(ap.ifconfig())
    return()

def toggle():
    led_pin.value(not get_value())

def get_value():
        return led_pin.value()

app = Microdot()
Response.default_content_type = 'text/html'
@app.route('/')
async def index(request):
    led_value= get_value()
    return await Template('index3.html').render_async (led_value=led_value)

@app.route('/toggle')
async def toggle_led(request):
    print("Receive Toggle Request!")
    toggle()
    return "OK"

@app.route('/static/<path:path>')
def static(request, path):
    if '..' in path:
        # directory traversal is not allowed
        return 'Not found', 404
    return send_file('static/' + path)

wifi_ap()
app.run()

index3.html, I removed the CSS to simplify

{% args led_value %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MicroPython Webserver</title>
    <script src="static/js/index.js"></script>
  </head>
  <body>
        <h1 class="title">MicroPython Webserver</h1>
        <div class="toggle-div">
            <p class="label">Toggle Switch</p>
            <input type="checkbox" id="switch" onclick="toggleButtonSwitch()" {% if led_value == 1 %} checked {% endif %}/><label for="switch">Toggle</label>
        </div>
  </body>
</html>

and index.js

function toggleButtonSwitch(e) {
  var switchButton = document.getElementById("switch");
  if (switchButton.checked) {
    console.log("On!");
    toggleValue = "ON";
  } else {
    console.log("Off!");
    toggleValue = "OFF";
  }
fetch('/toggle')
.then((response) => console.log(response))
.then((data) => console.log(data));
}

Thank you for taking the time to provide me with an explanation.

sophiedegran · 2024-01-26T17:56:46Z

sophiedegran
Jan 26, 2024

You should have an empty html page .. it's because your 'return OK' ...
2 solutions:

use same thing that you do in index / your post to server the request to '/toggle' / server will do it / and return to a page..
improve it with websocket (it's better choice)
With websocket you limit transaction on the board
Take your time I'm sure you will do it !

5 replies

PatLub85 Jan 26, 2024
Author

I'm sorry but I don't understand your first response.
Regarding websockets, I thought I could get rid of them thanks to Microdot which is supposed to simplify exchanges. A priori no 🥲

sophiedegran Jan 26, 2024

With fetch in javascript you don't use websocket .. In microdot you can 'deal' with the server via html or via websocket... it's really important to make the difference ...
For me, I use html to call the 'page' and make monitoring/ change on sensors with websocket..
But you can do it with html also..

PatLub85 Jan 26, 2024
Author

In my case, what exactly does fetch('/toggle'). The response is sent to the console!
How Microdot is impacted?

Sorry if my questions are basic

sophiedegran Jan 26, 2024

Yes but you can use fetch for post/ get .. that's why I prefer to inform you..

jimmo Jan 29, 2024
Maintainer

I'm not sure I agree that moving this to use websocket will make it simpler! Maybe in the future if you want to implement some sort of streaming of data, but for getting just a "do something when a button is pressed" then fetch is a good choice.

jimmo · 2024-01-29T01:02:48Z

jimmo
Jan 29, 2024
Maintainer

@PatLub85 The way promises and .then() works in Javascript is not quite what you're expecting.
The second .then() gets the result of the first one. So data is undefined in the second one because the first one doesn't return anything.

But why not handle the response in the first .then() block?

But either way, I think this is a better question for a web/javascript forum. What you should do is try and replicate a "demo" version of the code that you run on the device (e.g. use flask, it will be very similar to microdot) and run it in regular Python on your computer. Then you can get all this networking stuff working without also getting your device working at the same time.

1 reply

PatLub85 Jan 29, 2024
Author

Hi,
if I request a response in text mode, the second .then returns the OK returned by @app.route('/toggle')

function toggleButtonSwitch(e) {
  fetch('/toggle')
  .then((response) =>  response.text() )
  .then((data) => console.log(data));
}

And even stronger if I remove both .then(), the program works as expected!
The real question is what is the relationship between Microdot and Fletch?
I'm going to do as you recommend, I'm going to try to make a version in Python/Flask and ask the question on a Javascript forum.
I googled Flask/Fletch but couldn't find anything that could answer this question

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MicroPython

Javascript Fetch() #13529

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 6 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

MicroPython

Javascript Fetch() #13529

Uh oh!

PatLub85 Jan 26, 2024

Replies: 2 comments · 6 replies

Uh oh!

sophiedegran Jan 26, 2024

Uh oh!

PatLub85 Jan 26, 2024 Author

Uh oh!

sophiedegran Jan 26, 2024

Uh oh!

PatLub85 Jan 26, 2024 Author

Uh oh!

sophiedegran Jan 26, 2024

Uh oh!

jimmo Jan 29, 2024 Maintainer

Uh oh!

jimmo Jan 29, 2024 Maintainer

Uh oh!

PatLub85 Jan 29, 2024 Author

PatLub85
Jan 26, 2024

Replies: 2 comments 6 replies

sophiedegran
Jan 26, 2024

PatLub85 Jan 26, 2024
Author

PatLub85 Jan 26, 2024
Author

jimmo Jan 29, 2024
Maintainer

jimmo
Jan 29, 2024
Maintainer

PatLub85 Jan 29, 2024
Author