Завантаження віддалених даних у $mol — це не окремий API: асинхронне значення — це просто реактивна властивість, написана так, ніби відповідь уже є. Подання чекає на неї, показує стан завантаження й перемальовується, коли дані надходять.
Покличте мережу всередині @ $mol_mem і поверніть розібраний результат. Ні проміса, ні await, ні колбека в коді немає: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 призупиняє волокно, доки не надійде відповідь, після чого обчислення перезапускається і users() повертає масив. Поки відповідь очікується, будь-яке подання, що читає users(), автоматично показує вбудований стан завантаження — ви не пишете жодного прапорця isLoading. Самі проміс із @ $mol_mem не повертайте: покладений у значення проміс лишає комірку в стані завантаження назавжди, див. Розв'язання проблем.this.$ — це контекст компонента. Кожен сервіс приходить через нього: $mol_fetch для мережі, $mol_state_arg для URL, $mol_after_timeout для часу. У тесті контекст підміняється, тож той самий users() надсилає свій запит у мок замість мережі, і в компоненті не змінюється жодного рядка. Цей мок показує Тестування.
Прив'яжіть розв'язані дані прямо в список:1@ $mol_mem2user_names(){3return this.users().map(user=>user.name)4}Коли надходить відповідь, users() оновлюється, user_names() переобчислюється, і список малюється. Ніяких колбеків, ніякого useEffect.
Оскільки це просто реактивна комірка, ви перезавантажуєте її, знецінюючи. Залежте від токена, який можна збільшувати: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}Редагувати цю сторінку на GitHubЦе було корисно?ТакНіНазадРозв'язання проблемДаліСхеми данихНа цій сторінціАсинхронна властивістьМалювання результатуПерезавантаженняПомилкиДаліType to search the documentation.
