[Svelte 3] Use await block to wait for a promise and handle loading state in Svelte 3
for to in and use State Block Promise
2023-09-14 08:59:14 时间
Most web applications have to deal with asynchronous data at some point.
Svelte 3 apps are no different, luckily Svelte allows us to await the value of a promise directly in markup using await
block.
In this lesson we're going to learn how to use the await
block to fetch the data from a Star Wars API and both display the data and handle loading state.
// Before: <script> async function getRandomStarWarsCharacter() { const randomNumber = Math.floor(Math.random() * 10) + 1; const apiResponse = await fetch( `https://swapi.co/api/people/${randomNumber}/` ); return await apiResponse.json(); } let character; getRandomStarWarsCharacter().then(value => (character = value)); </script> <h1>{!character ? 'Loading ...' : character.name}</h1>
// After: <script> async function getRandomStarWarsCharacter() { const randomNumber = Math.floor(Math.random() * 10) + 1; const apiResponse = await fetch( `https://swapi.co/api/people/${randomNumber}/` ); return await apiResponse.json(); } let promise = getRandomStarWarsCharacter(); </script> <!-- <h1>{!character ? 'Loading ...' : character.name}</h1> --> {#await promise} <h1>Loading...</h1> {:then character} <h1>{character.name}</h1> {/await}
相关文章
- Spark 2.0 DataFrame map操作中Unable to find encoder for type stored in a Dataset.问题的分析与解决
- QT-找开工程后,最上方提示the code model could not parse an included file, which might lead to incorrect code completion and highlighting, for example.
- 【技术帖】解决 Hudson jenkins 连接等待中 - Waiting for next av
- How to Create Mixed Reality Videos for the Vive - with Two Controllers
- ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'mysql'
- [Angular] How to show global loading spinner for application between page navigation
- [Spring Boot] Use Component Scan to scan for Bean
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- ORA-01658:Unable to create INITIAL extent for segment in tablespace %s
- [Typescript] Step1 & 2 for converting a js app to ts
- How to create unit test for product determination function module
- Cloud for Customer里抓取Notification采取的是和CRM呼叫中心传统实现一样的Polling方式
- Cloud for Customer系统里的附件url,可以通过partner编程自己生成么?
- Custom tool error: Failed to generate code for the service reference ××××××. Please check other erro
- You currently don‘t have access to this membership resource. To resolve this issue, agree to the lat
- Myeclipse2017破解:成功解决me Trial expired 0 days ago mgeclipse It's now time to buy the best IDE for yo
- 已解决FutureWarning: The default value of regex will change from True to False in a future version. In
- 【ClickHouse】How to create index for Map Type Column or one key of it?
- Using Qt to build an Omi App for iOS (and Android)
- PAT 1033. To Fill or Not to Fill (贪心)
- 存在隐患 : 3 racks are required for the erasure coding policies: RS-6-3-1024k. The number of racks is on
- Open Inventor 10.11 for Java Crack
- Build mp4info for Ubuntu(三十一)