Entfernte Daten in $mol zu laden ist keine spezielle API — ein asynchroner Wert ist einfach eine reaktive Eigenschaft, die so geschrieben ist, als wäre die Antwort schon da. Die Ansicht wartet darauf, zeigt einen Ladezustand und rendert neu, wenn die Daten eintreffen.
Rufen Sie das Netz innerhalb eines @ $mol_mem auf und geben Sie das geparste Ergebnis zurück. Im Code steht kein Promise, kein await und kein Callback:1namespace $.$${2export class $my_usersextends$.$my_users{3@ $mol_mem4users(){5return this.$.$mol_fetch.json('https://api.example.com/users')as{6id:number7name:string8}[]9}10}11}$mol_fetch suspendiert die Fiber, bis die Antwort eintrifft, dann startet die Berechnung neu und users() gibt das Array zurück. Während sie aussteht, zeigt jede Ansicht, die users() liest, automatisch den eingebauten Ladezustand — Sie schreiben kein isLoading-Flag. Geben Sie nicht selbst ein Promise aus einem @ $mol_mem zurück: Ein als Wert abgelegtes Promise hält die Zelle für immer im Ladezustand, siehe Fehlerbehebung.this.$ ist der Kontext der Komponente. Jeder Dienst kommt durch ihn: $mol_fetch für das Netz, $mol_state_arg für die URL, $mol_after_timeout für die Zeit. In einem Test wird der Kontext ersetzt, sodass dasselbe users() seine Anfrage an einen Mock statt ins Netz schickt, ohne dass sich eine Zeile der Komponente ändert. Testen zeigt diesen Mock.
Binden Sie die aufgelösten Daten direkt in eine Liste:1@ $mol_mem2user_names(){3return this.users().map(user=>user.name)4}Wenn die Antwort eintrifft, aktualisiert sich users(), user_names() wird neu berechnet und die Liste rendert. Keine Callbacks, kein useEffect.
Weil es nur eine reaktive Zelle ist, laden Sie neu, indem Sie sie invalidieren. Hängen Sie von einem Token ab, das Sie hochzählen können:1@ $mol_mem2reload_token(next?:number){3return next??04}56@ $mol_mem7users(){8this.reload_token()// subscribe9return this.$.$mol_fetch.json('https://api.example.com/users')asunknown[]10}1112@ $mol_action13reload(){14this.reload_token(this.reload_token()+1)15}Diese Seite auf GitHub bearbeitenWar das hilfreich?JaNeinZurückFehlerbehebungWeiterDatenschemasAuf dieser SeiteEine asynchrone EigenschaftDas Ergebnis rendernNeu ladenFehlerWeiterType to search the documentation.
