• 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]?

VPS Starter Arubacloud
+1 głos
330 wizyt
pytanie zadane 2 kwietnia 2021 w JavaScript przez Oskar Szkurłat Bywalec (2,780 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 (190,190 p.)

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

komentarz 2 kwietnia 2021 przez Oskar Szkurłat Bywalec (2,780 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 (190,190 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,780 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,780 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 (190,190 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,780 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ź 436 wizyt
pytanie zadane 9 października 2018 w JavaScript przez Votex Początkujący (310 p.)
0 głosów
1 odpowiedź 1,144 wizyt
pytanie zadane 7 kwietnia 2018 w JavaScript przez lastavenger Obywatel (1,060 p.)
0 głosów
1 odpowiedź 411 wizyt
pytanie zadane 25 września 2019 w JavaScript przez Mariusz Podgórski Początkujący (400 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...