I have a simple function in javascript that fetch and URL and update the HTML page when it got a response like:

 function post_db(self) {
   // other code here
   async function postData() {
      const url = "fetchnewseq"
      
      const response = await fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrftoken,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(comandi_json)
      });
      return await response.json()
    }
    
    postData().then((data) => { 
        window.location.replace(data.url); 
    });
   }

The post_db function is fired by a button like

<button onclick="post_db(this)" class="btn btn-success">Conferma</button>

On the backend I'm using Django and the view that manages that URL is

def fetch_new_seq(request):
    json_ricevuto = json.loads(request.body.decode("utf-8"))
    print(json_ricevuto)
    messages.success(request, "Ricevuto")
    redirect_url = reverse('newSeq')
    return JsonResponse({'url': redirect_url})

For some reason, the fetch is fired two times as I'm seeing the function on the backed with the same results two times

I can't understand why it happens tho as, the button is clicked just one

I'm also seeing on the console of Mozilla Browser I got the error Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

The button that fires the post_db is inside a certain number of divs

 <div id="container" class="container-fluid">
  <div class="container text-center">
    <h3>Creazione di sequenze di movimento</h3>
    <input
      type="text"
      class="form-control mt-3 mb-3"
      id="titleseq"
      placeholder="Inserisci Titolo"
    />

    <div class="row">
      <div class="d-grid gap-2 col">
        <button onclick="load_js()" class="btn btn-secondary">
          Riordina
        </button>
      </div>
      <div class="d-grid gap-2 col">
        {% csrf_token %}
        <button onclick="post_db()" class="btn btn-success">
          Conferma
        </button>
      </div>
      <div class="d-grid gap-2 col">
        <button onclick="addNewRow()" class="btn btn-primary">
          Aggiungi Movimento
        </button>
      </div>
    </div>
  </div>

So I may have found the issue. The async function with the fetch code was inside a for loop like:

for (var i = 0; i < len_array; i++) {
  if (
    comandi_json["lista_comandi"][i]["comando"] == "" ||
    comandi_json["lista_comandi"][i]["tempo"] == null
  ) {
    console.log("Error");
    return;
  } else {
    async function postData() {
      const url = "fetchnewseq";

      const response = await fetch(url, {
        method: "POST",
        headers: {
          "X-CSRFToken": csrftoken,
          "Content-Type": "application/json",
        },
        body: JSON.stringify(comandi_json),
      });
      return await response.json();
    }
    postData().then((data) => {
      window.location.replace(data.url);
    });
  }
}

Clearly, every time the first check was performed correctly without return, the else got fired and, with it, the fetch function triggered it more than once and generated the issue.

Rewriting it outside the for fixed the issue

for (var i = 0; i < len_array; i++) {
  if (
    comandi_json["lista_comandi"][i]["comando"] == "" ||
    comandi_json["lista_comandi"][i]["tempo"] == null
  ) {
    console.log("Error");
    return;
  } 
 }

    async function postData() {
      const url = "fetchnewseq";

      const response = await fetch(url, {
        method: "POST",
        headers: {
          "X-CSRFToken": csrftoken,
          "Content-Type": "application/json",
        },
        body: JSON.stringify(comandi_json),
      });
      return await response.json();
    }
    postData().then((data) => {
      window.location.replace(data.url);
    });