How to deal with non-async APIs in an async way using javascript

Let's say you have to work with an API which is not updated to the newest async trends.

Making a call to an API takes some time and you need to keep the users informed about what's going on with their request.

Instead of making the user stare at a loading screen you can handle their requests using javascript along with any modern frontend framework (React, Vue etc).

By making use of stores you can handle a sync API backend without altering your way of working with a frontend framework.

Let's say we have this code on the backend:

from time import sleep
from flask import Flask, render_template
from flask.json import jsonify

api = Flask(__name__)

@api.route("/")
def index():
    return render_template("index.html")

@api.route("/long-wait")
def long_wait():
    sleep(5) # some task that takes a lot of time to process
    return jsonify({"data": "was gathered"})

@api.route("/short-wait")
def short_wait():
    sleep(1) # another task that takes a little bit less
    return jsonify({"data": "fetched"})

if __name__ == "__main__":
    api.run(debug=True)

In the example from above we have 2 endpoints that we are interested in: /long-wait and /short-wait. Both do some computations on the backend, while one of them takes longer than the other (the API is made in Flask, which is a sync backend framework for Python3).

With javascript you can make a better experience by using something like the lines written bellow:

    <button>get some data (long-wait)</button>
    <p>click to fetch data</p>

    <button>get some data (short-wait)</button>
    <p>click to fetch data</p>


    <script>

        let btn = document.getElementsByTagName("button")[0]
        let p = document.getElementsByTagName("p")[0]

        btn.addEventListener("click", () => {
            btn.disabled = true
            btn.innerText = "loading..."
            p.innerText = "data is being fetched"
            fetch("http://localhost:5000/long-wait")
            .then(res => res.json())
            .then(data => {
                console.log(data)
                btn.disabled = false
                btn.innerText = "get some data (long-wait)"
                p.innerText = JSON.stringify(data)
            })
        })


        let btn_short_wait = document.getElementsByTagName("button")[1]
        let p_short_wait = document.getElementsByTagName("p")[1]

        btn_short_wait.addEventListener("click", () => {
            btn_short_wait.disabled = true
            btn_short_wait.innerText = "loading..."
            p_short_wait.innerText = "data is being fetched"
            fetch("http://localhost:5000/short-wait")
            .then(res => res.json())
            .then(data => {
                btn_short_wait.disabled = false
                console.log(data)
                btn_short_wait.innerText = "get some data (short-wait)"
                p_short_wait.innerText = JSON.stringify(data)
            })
        })

    </script>

In the above lines you have some simple javascript code which deals with the API in an async way, keeping the user informed on their requests.

Below we have a sample on how the code works:

GIF