Ошибка «сломанного канала» при отправке запроса ajax в django

Question

1

Я создаю таймер для SpeedCube с помощью Django, в основном он показывает способ скрестить мой куб, и я могу засечь, сколько времени мне потребуется, чтобы его собрать. На данный момент я только что реализовал функцию таймера с помощью JS, после того, как я останавливаю таймер, он отправляет мне время через запрос AJAX к представлению, которое создает объект решения, одним из атрибутов которого является время, проблема в том, что я получаю ошибку broken pipe в консоли вместо запроса post, хотя функция вызывается и объект создается, также когда в инструментах разработчика запрос fetch отображается как отмененный. Это мой первый самостоятельный проект, я не следовал никаким руководствам и не знаю JS, поэтому, пожалуйста, если у вас есть какие-либо советы по оптимизации чего-либо, я буду вам признателен.

HTML:

JS:

view de python:

Я попытался удалить часть codeа, потому что, как мне кажется, что-то выполняется слишком долго, но это не сработало. Я подумываю взять часть, которая создает объект, и поместить ее в асинхронную задачу, возможно, с помощью Celery.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
    <title>TimerJS</title>
</head>
<body>
    <div class="container">
        <div class="clock">
            <input class="number" type="text" maxlength="2" value="00" readonly><span>:</span><input class="number" type="text" maxlength="2" value="00" readonly><span>:</span><input class="number" type="text" maxlength="2" value="00" readonly>
        </div>
        <div class="buttons">
            <button id="play" onclick="startTimer()"></button>
            <button id="stop" onclick="stopTimer()"></button>
        </div>
    </div>
    <script src="{% static 'js/timer.js' %}"></script>
</body>
</html>

let inputs, clock, alarm, minutes = 0, seconds = 0, decseconds = 0,repeater; /* Declaro todas las variables que necesito */

window.addEventListener('load', () => { /* Espero a que cargue el documento */
    clock = document.querySelector('.clock'); /* Busco el reloj */
});

/* Funcion principal */
function startTimer() { 

    setTimer();  /* Seteo el timer visualmente */
    countdown()  /* Arranco el contador */

}

/* Funcion para cambiar el timer en la pantalla y en la pestaña */
function setTimer() {
    /* Cambio la hora en pantalla */
    clock.innerHTML = `<p class="number">${minutes > 9 ? minutes : ('0' + minutes)}</p><span>:</span><p class="number">${seconds > 9 ? seconds : ('0' + seconds)}</p><span>:</span><p class="number">${decseconds > 9 ? decseconds : ('0' + decseconds)}`;
}

/* Funcion que arranca el contador */
function countdown() {
    repeater = setInterval(runner,10);
}

/* Funcion que cuenta */
function runner() {
    /* Si tengo más de 0 segundos, restá segundos */
    /* Si tengo 0 segundos pero tengo más de 0 minutos, poné segundos en 59 y restale 1 a minutos */
    /* Si tengo 0 segundos, 0 minutos pero tengo más de 0 horas, poné segundos en 59, minutos en 59 y restale 1 a horas */
    /* Sino arranca la alarma */
    decseconds++
    if (decseconds%100 == 0) {
        seconds++;
        decseconds = 0
    } else {
        if (seconds == 60) {
            seconds = 0
            minutes++;
        }
    }
    
    setTimer();
}

/* Funcion para detener el timer */
function stopTimer(){
    clearInterval(repeater);
    location.reload();
    sentTime();
}

function sentTime(){

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    const url = "save_solve/";
    var options = {
        method: 'POST',
        headers: {'X-CSRFToken': getCookie('csrftoken')},
        // mode: 'same-origin'
    }

    var formData = new FormData();
    formData.append('minutes', minutes);
    formData.append('seconds', seconds);
    formData.append('decseconds', decseconds);
    options['body'] = formData;

    fetch(url, options)
};

def save_time(request):
    ms = int(request.POST.get('decseconds'))*10
    s = int(request.POST.get('seconds'))
    m = int(request.POST.get('minutes'))
    print(f'{m}:{s}:{ms}')
    solve = Solve()
    solve.solve_time = datetime.timedelta(minutes=m, seconds=s, milliseconds=ms)
    solve.save()
    return HttpResponse('Sí se ejecutó la petición')

Акулина

Вопрос задан19 апреля 2024 г.

Ошибка «сломанного канала» при отправке запроса ajax в django

1 Ответ

Ваш ответ