• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

+1 głos
103 wizyt
pytanie zadane 2 kwietnia 2021 w JavaScript przez Oskar Szkurłat Bywalec (2,140 p.)

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ę

komentarz 2 kwietnia 2021 przez ScriptyChris Mędrzec (171,840 p.)

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

komentarz 2 kwietnia 2021 przez Oskar Szkurłat Bywalec (2,140 p.)

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.

1
komentarz 2 kwietnia 2021 przez ScriptyChris Mędrzec (171,840 p.)

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)

 

komentarz 2 kwietnia 2021 przez Oskar Szkurłat Bywalec (2,140 p.)

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)
}

 

1
komentarz 2 kwietnia 2021 przez Oskar Szkurłat Bywalec (2,140 p.)

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')
}

 

1 odpowiedź

+2 głosów
odpowiedź 2 kwietnia 2021 przez ScriptyChris Mędrzec (171,840 p.)
wybrane 2 kwietnia 2021 przez Oskar Szkurłat
 
Najlepsza

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.

komentarz 2 kwietnia 2021 przez Oskar Szkurłat Bywalec (2,140 p.)

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 cheeky.

forwardEvent = async e => {...}

 

Podobne pytania

0 głosów
1 odpowiedź 296 wizyt
pytanie zadane 9 października 2018 w JavaScript przez Votex Początkujący (310 p.)
0 głosów
1 odpowiedź 1,063 wizyt
pytanie zadane 7 kwietnia 2018 w JavaScript przez lastavenger Obywatel (1,060 p.)
0 głosów
1 odpowiedź 270 wizyt
pytanie zadane 25 września 2019 w JavaScript przez Mariusz Podgórski Początkujący (400 p.)

86,526 zapytań

135,279 odpowiedzi

300,595 komentarzy

57,275 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...