smalljs$molCerca⌘ KDocumentazionePlaygroundConfrontoEcosistemaInformazioniIT
Recupero datiGetting StartedIntroduzioneModello mentalePer iniziareDa TypeScript a view.treeStruttura del progettoStrumentiEssentialsInstallazioneVisteStato e reattivitàRoutingRenderingTestingDeploymentRisoluzione dei problemiDataRecupero datiSchemi di datiGiper BazaMoreVetrinaDa React, Vue e SvelteRicettarioAdvancedPluginMetadati del moduloOfflineViste fantasmaAboutFAQTeamReleaseAPI$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

Recupero dati

Caricare dati remoti in $mol non è un'API speciale — un valore asincrono è solo una proprietà reattiva scritta come se la risposta fosse già lì. La vista l'attende, mostra uno stato di caricamento e si ri-renderizza quando i dati arrivano.

Una proprietà asincrona

Chiama la rete dentro un @ $mol_mem e restituisci il risultato già parsato. Nel codice non c'è alcuna promise, alcun await né alcuna callback:1namespace $.$$ {2 export class $my_users extends $.$my_users {3 @ $mol_mem4 users() {5 return this.$.$mol_fetch.json( 'https://api.example.com/users' ) as {6 id: number7 name: string8 }[]9 }10 }11}$mol_fetch sospende la fibra finché non arriva la risposta, poi il calcolo riparte e users() restituisce l'array. Mentre è in attesa, ogni vista che legge users() mostra automaticamente lo stato di caricamento integrato — non scrivi alcun flag isLoading. Non restituire tu stesso una promise da un @ $mol_mem: una promise conservata come valore tiene la cella nello stato di caricamento per sempre, vedi Risoluzione dei problemi.this.$ è il contesto del componente. Ogni servizio passa di lì: $mol_fetch per la rete, $mol_state_arg per l'URL, $mol_after_timeout per il tempo. In un test il contesto viene sostituito, così lo stesso users() manda la sua richiesta a un mock invece che alla rete, senza cambiare una riga del componente. Testing mostra quel mock.

Renderizzare il risultato

Collega i dati risolti direttamente in una lista:1 @ $mol_mem2 user_names() {3 return this.users().map( user => user.name )4 }Quando arriva la risposta, users() si aggiorna, user_names() si ricalcola e la lista si renderizza. Niente callback, niente useEffect.

Ricaricare

Poiché è solo una cella reattiva, ricarichi invalidandola. Dipendi da un token che puoi incrementare:1 @ $mol_mem2 reload_token( next?: number ) {3 return next ?? 04 }5 6 @ $mol_mem7 users() {8 this.reload_token() // subscribe9 return this.$.$mol_fetch.json( 'https://api.example.com/users' ) as unknown[]10 }11 12 @ $mol_action13 reload() {14 this.reload_token( this.reload_token() + 1 )15 }
Modifica questa pagina su GitHubÈ stato utile?NoPrecedenteRisoluzione dei problemiSuccessivoSchemi di dati
In questa paginaUna proprietà asincronaRenderizzare il risultatoRicaricareErroriAvanti
Type to search the documentation.