Share
React è probabilmente la libreria più popolare per la creazione di applicazioni web interattive. Tuttavia, React non è un framework web completo. Si concentra sulla parte vista del modello MVC venerabile.
Esiste un intero ecosistema React che affronta altri aspetti. In questo tutorial, imparerai a conoscere uno degli elementi più basilari di qualsiasi applicazione web: come recuperare i dati da visualizzare. Questo non è banale. Esistono diversi punti nella gerarchia del componente React in cui è possibile recuperare i dati. Quando recuperare i dati è un'altra preoccupazione. È inoltre necessario considerare quale tecnologia utilizzare per il recupero dei dati e dove memorizzarli.
Alla fine di questo tutorial, avrai un quadro chiaro di come funziona il recupero dei dati in React, i pro e i contro di approcci diversi e come applicare questa conoscenza alle tue applicazioni React.
Creiamo uno scheletro per la nostra app React con create-react-app:
> create-react-app react-data-fetcher
Il risultato è una struttura di directory piuttosto elaborata. Leggi l'eccellente file README se non hai familiarità con create-react-app.
Ho creato un semplice server per archiviare e servire citazioni. Non è il fulcro di questo tutorial, e il suo ruolo è quello di fornire un'API remota per dimostrare come recuperare i dati con React. Solo per soddisfare la tua curiosità, è un'applicazione Python 3 basata sul framework hug e utilizza Redis come memoria persistente.
L'API è estremamente semplice. C'è un singolo endpoint, /citazioni. Restituisce tutte le quotazioni memorizzate in risposta a una richiesta HTTP GET ed è possibile aggiungere nuove citazioni inviando una richiesta HTTP POST.
Il codice sorgente completo è disponibile su GitHub.
L'app demo è un'applicazione React che comunica con il servizio quote, visualizza tutte le virgolette e consente di aggiungere nuove virgolette.
Ecco uno screenshot:
La struttura dell'app è molto semplice. Ho iniziato con uno scheletro creato da create-react-app e aggiunto due componenti nella sottodirectory src: QuoteList e AddQuoteForm. Ecco la struttura della directory (esclusi node_modules):
~ / git / react-data-fetcher> tree -I node_modules -L 2. ├── README.md ├── README2.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├─ ─ AddQuoteForm.css │ ├── AddQuoteForm.js │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── QuoteList.js │ ├── index.css │ ├ ── index.js │ └── registerServiceWorker.js └── yarn.lock 2 directory, 16 file
Il codice sorgente completo è disponibile su GitLab.
Il componente funzionale QuoteList visualizza un elenco di citazioni come elenco puntato. Si aspetta una serie di stringhe:
import Reagire da 'react' const QuoteList = (quotes) => quotes.map (quote =>
È un componente figlio del componente principale dell'app.
L'API di recupero è un'API basata su promesse che restituisce un oggetto risposta. Per ottenere il contenuto JSON attuale, è necessario richiamare il JSON () metodo dell'oggetto risposta.
fetchQuotes = () => this.setState (... this.state, isFetching: true) fetch (QUOTE_SERVICE_URL) .then (response => response.json ()) .then (risultato => this.setState (virgolette : result, isFetching: false)) .catch (e => console.log (e));
Reagire è, ovviamente, tutto sui componenti. La questione su dove posizionare il codice di recupero dei dati è importante. Se si calcola bene il codice, si avranno molti componenti generici e alcuni componenti specifici dell'applicazione. Reagire e JavaScript in generale sono molto flessibili, quindi è possibile iniettare la logica ovunque.
Il recupero delle citazioni da un'API REST richiede una qualche forma di polling, dal momento che voglio che le virgolette siano sempre aggiornate. Ma anche il recupero iniziale è importante. I componenti di React hanno metodi del ciclo di vita in cui è possibile implementare la logica che verrà eseguita in un determinato momento. Il componentDidMount () il metodo si attiva quando il componente è accessibile e il suo stato modificato. È il punto perfetto per iniziare il recupero dei dati.
Ecco come appare:
componentDidMount () this.fetchQuotes ()
Se vuoi davvero ridurre il tempo di visualizzazione iniziale, puoi prendere in considerazione l'utilizzo di componentWillMount () per avviare il recupero asincrono, ma si rischia di avere il recupero completo prima che il componente sia montato. Non consiglio questo approccio.
Scopri Mastering dei metodi del ciclo di vita React per ulteriori dettagli.
L'avvio iniziale componentDidMount () è grandioso, ma voglio aggiornare frequentemente le citazioni. In un'API basata su REST, l'unica soluzione è il polling periodico del server. Il servizio di quotazione è molto semplice e restituisce sempre tutte le virgolette.
Servizi più scalabili forniranno un modo per verificare la disponibilità di aggiornamenti o anche l'uso di HTTP if-modify-since o eTag. La nostra applicazione demo recupera tutto ogni cinque secondi avviando un timer componentDidMount () e pulizia in componentWillUnmount ():
componentDidMount () this.fetchQuotes () this.timer = setInterval (() => this.fetchQuotes (), 5000); componentWillUnmount () this.timer = null;
La durata del sondaggio è una decisione specifica dell'app. Se hai bisogno di aggiornamenti in tempo reale e / o il polling sta stressando troppo il back-end, considera l'utilizzo di WebSockets invece di REST.
A volte il recupero dei dati può richiedere molto tempo. In tal caso, la visualizzazione di una barra di avanzamento o di un'animazione lucida per consentire all'utente di sapere cosa sta succedendo può contribuire molto all'esperienza dell'utente. Questo è particolarmente importante quando l'utente inizia il recupero dei dati (ad esempio facendo clic su un pulsante di ricerca).
Nell'app demo, visualizzo semplicemente un messaggio che recita "Recupero delle virgolette ..." mentre è in corso il recupero. Nel render () metodo del componente principale dell'app, utilizzo il rendering condizionale controllando il state.isFetching membro.
render () const title = 'Citazioni per ya!' let now = new Date () return ();titolo
this.state.isFetching? 'Recupero di citazioni ...': "
Il fetchQuotes () il metodo si occupa dell'aggiornamento state.isFetching inizializzandolo su true all'avvio e impostandolo su false quando si ricevono le virgolette:
fetchQuotes = () => this.setState (... this.state, isFetching: true) fetch (QUOTE_SERVICE_URL) .then (response => response.json ()) .then (risultato => this.setState (virgolette : result, isFetching: false)) .catch (e => console.log (e));
Faccio il minimo della gestione degli errori qui registrando gli errori rilevati nella console. A seconda dell'applicazione, è possibile richiamare alcuni tentativi di logica, informare l'utente o visualizzare alcuni contenuti di riserva.
L'API di recupero ha un paio di trucchi. Richiede il passaggio extra per l'estrazione di JSON da una risposta. Inoltre non cattura tutti gli errori. Ad esempio, 404 verrà restituito come una risposta normale. Dovrai controllare il codice di risposta e anche gestire gli errori di rete che vengono scoperti.
Quindi dovrai gestire gli errori in due punti. Ma puoi usare la libreria axios.js per risolvere questi problemi e avere un codice leggermente più conciso al prezzo dell'aggiunta di una dipendenza esterna. Ecco come appare il codice con gli assiomi:
fetchQuotes = () => this.setState (... this.state, isFetching: true) axios.get (QUOTE_SERVICE_URL) .then (response => this.setState (quotes: response.data, isFetching: false) ) .catch (e => console.log (e);
Questo non sembra molto, ma aiuta. Il codice per aggiungere una nuova citazione è molto più conciso con gli assiomi. Ecco la versione di recupero:
Accentsconagua
handleSubmitWithFetch = event => let data = new FormData () data.append ('quote', this.state.quote) fetch (this.props.quote_service_url, method: 'POST', body: data) .then ( response => response.json ()) .catch (e => console.log (e)); event.preventDefault (); Ed ecco la versione di axios:
handleSubmit = event => axios.post (this.props.quote_service_url, 'quote': this.state.quote) .then (r => console.log (r)) .catch (e => console.log (e)); event.preventDefault ();
In questo tutorial hai imparato come recuperare i dati in modo asincrono in un'applicazione React. Abbiamo discusso i metodi rilevanti del ciclo di vita, il polling, i rapporti sui progressi e la gestione degli errori.
Abbiamo esaminato due librerie basate su promesse: l'API di recupero e axios.js. Ora, vai là fuori e crea fantastiche applicazioni React che accedono alle API remote.
Negli ultimi due anni, React è cresciuto in popolarità. In effetti, sul mercato sono disponibili numerosi articoli disponibili per l'acquisto, la revisione, l'implementazione e così via. Se stai cercando risorse aggiuntive intorno a React, non esitare a verificarle.
