smalljs$molPesquisar⌘ KDocsPlaygroundCompararEcossistemaSobrePT
Busca de dadosGetting StartedIntroduçãoModelo mentalPrimeiros passosDe TypeScript para view.treeEstrutura do projetoFerramentasEssentialsInstalaçãoViewsEstado e reatividadeRoteamentoRenderizaçãoTestesDeploySolução de problemasDataBusca de dadosEsquemas de dadosGiper BazaMoreVitrineDe React, Vue e SvelteLivro de receitasAdvancedPluginsMetadados de móduloOfflineVistas fantasmaAboutFAQEquipeLançamentosAPI$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

Busca de dados

Carregar dados remotos no $mol não é uma API especial — um valor assíncrono é apenas uma propriedade reativa escrita como se a resposta já estivesse ali. A vista a aguarda, mostra um estado de carregamento e renderiza de novo quando os dados chegam.

Uma propriedade assíncrona

Chame a rede dentro de um @ $mol_mem e retorne o resultado já parseado. No código não há promise, nem await, nem 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 suspende a fibra até a resposta chegar, então a computação reinicia e users() devolve o array. Enquanto está pendente, qualquer vista que lê users() mostra automaticamente o estado de carregamento embutido — você não escreve nenhuma flag isLoading. Não retorne você mesmo uma promise de um @ $mol_mem: uma promise guardada como valor deixa a célula no estado de carregamento para sempre, veja Solução de problemas.this.$ é o contexto do componente. Todo serviço passa por ele: $mol_fetch para a rede, $mol_state_arg para a URL, $mol_after_timeout para o tempo. Num teste o contexto é substituído, então esse mesmo users() manda a requisição para um mock em vez da rede, sem mudar uma linha do componente. Testes mostra esse mock.

Renderizar o resultado

Vincule os dados resolvidos diretamente em uma lista:1 @ $mol_mem2 user_names() {3 return this.users().map( user => user.name )4 }Quando a resposta chega, users() se atualiza, user_names() recalcula e a lista renderiza. Sem callbacks, sem useEffect.

Recarregar

Como é apenas uma célula reativa, você recarrega invalidando-a. Dependa de um token que você pode incrementar: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 }
Editar esta página no GitHubIsto foi útil?SimNãoAnteriorSolução de problemasPróximoEsquemas de dados
Nesta páginaUma propriedade assíncronaRenderizar o resultadoRecarregarErrosPróximo
Type to search the documentation.