Fetch() POST działający tylko 6 razy [React.js]?

Question

Cześć, potrzebuję informację o wciśnięciu oraz zwolnieniu przycisku ze strony. Mam napisany backend node.js oraz reactowy frontend (korzystam z Express).
Sam mechanizm i transmisja danych działa bez zarzutów (wciskam przycisk na frontendzie i w momencie wciśnięcia wysyłany jest obiekt {state: true} oraz w momencie zwolnienia przycisku wysyłany jest obiekt {state: false}).
Problem jednak tkwi w fakcie, że dane są wysyłane jedynie 6 razy (3xdown i 3xup myszki). Nie rozumiem dlaczego? Po czym jakby umiera komunikacja strony bez jakiegokolwiek błędu na konsoli, pomaga jedynie reset strony, bez konieczności resetu backendu. Próbowałem czystym javascriptowym fetch(), jak również axios'em - w obu przypadkach identyczny rezultat.
Co w tej sytuacji może powodować, jakby limit postów? Zawsze jest ona taka sama, co nasuwa mi jakiś limit? Próbowałem również zmianę na no-cors, ale wtedy wysyłane są puste obiekty do backendu, no i też po 6ciu umiera strona.
Na stronie mam również stosowane fetch() z metodą get (do wykresu), który działa idealnie, niezależnie od czasu pracy (ilości żądań). Po wysłaniu tych 6 zapytań do backendu (metodą post) umiera również wspomniana, odrębna metoda get dla wykresu.
 

function getFromSite(req, res) {
    console.log(req.body)
}

import React from 'react'
import axios from 'axios'
class Controller extends React.Component {
    constructor(props) {
        super(props)
    }
    forwardEvent = (e) => {
        let state
        if (e.type === "mousedown") state = true
        else state = false
        const res = axios.post('/forwardCmd', { state: state })
        console.log('res', res)
    }

    render() {
        return (
            <div>
                <Button onMouseDown={this.forwardEvent} onMouseUp={this.forwardEvent}>Forward</Button><br></br>
            </div >
        )
    }

}

Poniżej ilustracja jak wygląda konsola backendu, czyli 3 krotne wciśnięcie i zwolnienie przycisku. '>' to tylko sprawdzenie, czy backend nie został zawieszony (interwał czasowy 1sec dla testu), co wyklucza zawieszenie się aplikacji node.js.

Z góry dziękuję

Comments

Czy po 6-tym razie funkcja forwardEvent w komponencie jest nadal wołana?

---

Tak, dorzuciłem teraz websocket i tylko fetch nie działa, na konsoli też handler przycisku wypisałem i działa bez końca.

(Kolorowe to info z axiosa, a received to websocket)

Sprawdziłem przy okazji czy to nie może z hookiem Reacta jest coś nie tak poprzez wpisanie niezmiennej wartości, ale też fetchuje się tylko 6 postów.

---

Tak, dorzuciłem teraz websocket i tylko fetch nie działa, na konsoli też handler przycisku wypisałem i działa bez końca.

A czy w zakładce Network devtoolsów widać wychodzący request, czy po 6-tym razie nic nie wychodzi?

Przy okazji, brakuje await przy oczekiwaniu na wynik z axios.post, albo wrzuć console.log(res) do then.

     const res = axios.post('/forwardCmd', { state: state })
     console.log('res', res)

 

---

Z tym brakiem await byłem świadom, ale to też dlatego, że react mi zwracał błąd Unexpected reserved word 'await'.

Natomiast co do konsoli sieci, to widać requesta po 6tym (zaznaczono na złoto). Ale za teraz mnie zdziwił status "pending" za każdym razem. Może to jest przyczyna, że server nigdy nie zmienia statusu?

Od razu zamieszczam kod, jak po stronie backendu mam to zrealizowane:
 

//___________ Libraries ___________
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const path = require('path')
//___________ Configuration ___________
const port = require('../config/config').SERVER.PORT
const PORT = process.env.PORT || port
app.set('views', path.join(__dirname, '..', 'frontend', 'build'));
app.set('view engine', 'hbs')
app.use(express.static(path.join(__dirname, '..', 'frontend', 'build')));
//___________ My files ___________
const routes = require('./routes/index')
//___________ Parsers ___________
app.use(bodyParser.json())
app.use(bodyParser.raw());
app.use(bodyParser.urlencoded({ extended: true }));
//___________ Routes ___________
app.use('/', routes)

app.listen(PORT)

const express = require('express')
const router = express.Router()
router.post('/forwardCmd', MovementsController.getFromSite)

function getFromSite(req, res) {
    console.log(req.body)
}

 

---

Ok, już widzę gdzie był błąd, dziękuję za nakierowanie :) problem był w tym, że nie odsyłałem zakończenia POST z backendu na frontend i był pending status zamiast 200.

function getFromSite(req, res) {
    console.log(req.body)
    res.end('Done')
}

 

Answer 1

react mi zwracał błąd Unexpected reserved word 'await'.

A oznaczyłeś funkcję forwardEvent jako async?

---

router.post('/forwardCmd', MovementsController.getFromSite)

/** **/

function getFromSite(req, res) {
    console.log(req.body)
}

Middleware getFromSite nie zwraca response, więc w przeglądarce requesty są oznaczone pending (oczekujące). Nie wiem czy i jaki jest limit wiszących requestów w przeglądarce (mozliwe, że to można podejrzeć i ustawić flagą w konfiguracji), ale to może być przyczyna problemu, że więcej nie jest wysyłanych, bo poprzednie się jeszcze nie zakończyły.

Comments

Dokładnie sekundę temu to zauważyłem i poprawiłem, dzięki jeszcze raz. Widocznie przeglądarka ma limit do 6 wysłanych requestów (które zadziałały), a potem kolejnych już nie wysyłało.

A w await, faktycznie przeoczyłem async .

forwardEvent = async e => {...}