smalljs$molRechercher⌘ KDocsPlaygroundComparerÉcosystèmeÀ proposFR
Récupération de donnéesGetting StartedIntroductionModèle mentalDémarrageDe TypeScript à view.treeStructure d'un projetOutillageEssentialsInstallationVuesÉtat et réactivitéRoutageRenduTestsDéploiementDépannageDataRécupération de donnéesSchémas de donnéesGiper BazaMoreVitrineDe React, Vue et SvelteRecettesAdvancedPluginsMétadonnées de moduleHors-ligneVues fantômesAboutFAQÉquipeVersionsAPI$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

Récupération de données

Charger des données distantes dans $mol n'est pas une API spéciale — une valeur asynchrone n'est qu'une propriété réactive écrite comme si la réponse était déjà là. La vue l'attend, affiche un état de chargement et se re-rend quand les données arrivent.

Une propriété asynchrone

Appelez le réseau à l'intérieur d'un @ $mol_mem et renvoyez le résultat analysé. Il n'y a dans le code ni promesse, ni await, ni 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 suspend la fibre jusqu'à l'arrivée de la réponse, puis le calcul repart et users() renvoie le tableau. Pendant qu'elle est en attente, toute vue qui lit users() affiche automatiquement l'état de chargement intégré — vous n'écrivez aucun drapeau isLoading. Ne renvoyez pas vous-même une promesse depuis un @ $mol_mem : une promesse stockée comme valeur garde la cellule en chargement pour toujours, voyez Dépannage.this.$ est le contexte du composant. Chaque service passe par lui : $mol_fetch pour le réseau, $mol_state_arg pour l'URL, $mol_after_timeout pour le temps. Dans un test, le contexte est remplacé, si bien que le même users() envoie sa requête à une simulation au lieu du réseau, sans qu'une seule ligne du composant change. Tests montre cette simulation.

Rendre le résultat

Liez les données résolues directement dans une liste :1 @ $mol_mem2 user_names() {3 return this.users().map( user => user.name )4 }Quand la réponse arrive, users() se met à jour, user_names() se recalcule et la liste s'affiche. Pas de callbacks, pas de useEffect.

Recharger

Comme ce n'est qu'une cellule réactive, vous rechargez en l'invalidant. Dépendez d'un jeton que vous pouvez incrémenter :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 }Modifier cette page sur GitHubÉtait-ce utile ?OuiNonPrécédentDépannageSuivantSchémas de donnéesSur cette pageUne propriété asynchroneRendre le résultatRechargerErreursSuite
Type to search the documentation.