Jetpack Compose Academy · Leçon

Interface de chargement, de réussite et d’erreur

Affichez proprement chaque résultat réseau.

Leçon 4 sur 413 étapes

Interface de chargement, de réussite et d’erreur est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Every Request Has Three Outcomes

A network call is either still loading, finished with data, or failed. Great screens show something honest for all three.

Model State With a Sealed Class

A sealed class captures those outcomes as distinct types, so the compiler forces you to handle each case in the UI.

sealed class UiState {
    object Loading : UiState()
    data class Success(val users: List<User>) : UiState()
    data class Error(val message: String) : UiState()
}

Start in the Loading State

Initialize your state as Loading so the screen shows a spinner the instant it appears, before any data arrives.

var state by mutableStateOf<UiState>(UiState.Loading)

Update on Success

When the call returns, swap the state to Success with the fetched list. Compose recomposes and reveals the content.

state = UiState.Success(api.getUsers())

Update on Error

In your catch block, move to the Error state with a friendly message instead of leaving the user stuck on a spinner.

catch (e: Exception) {
    state = UiState.Error("Couldn't load users")
}

Branch With when

In the Composable, use a when over the state. Each branch renders exactly the right UI for that outcome.

when (val s = state) {
    is UiState.Loading -> { }
    is UiState.Success -> { }
    is UiState.Error -> { }
}

Show a Spinner While Loading

For the loading branch, a centered CircularProgressIndicator reassures users that something is happening. ⏳

is UiState.Loading -> CircularProgressIndicator()

Render the Data on Success

The success branch reads the list and draws it, usually in a LazyColumn so long results scroll smoothly.

is UiState.Success -> UserList(s.users)

Offer a Retry on Error

The error branch should show the message plus a Retry button that re-runs your load function. Failures shouldn't be dead ends.

is UiState.Error -> RetryView(s.message, ::loadUsers)

Handle the Empty Case

Success doesn't always mean items. When the list is empty, show a calm empty state rather than a blank screen.

One State Drives the Whole Screen

Because a single state object decides everything, your UI can never show a spinner and data at once. It stays predictable.

Quick Check

Why model loading, success, and error as a sealed class?

Recap: Rendering Every Outcome

You modeled state as a sealed class, branched with when, and showed loading, data, errors, and empties. You can now ship a robust networked screen.

Gratuit pour commencer

Apprends Kotlin avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
30
Leçons
120

Questions Fréquemment Posées

La leçon « Interface de chargement, de réussite et d’erreur » est-elle gratuite ?

Oui — le texte complet de « Interface de chargement, de réussite et d’erreur » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Interface de chargement, de réussite et d’erreur » ?

Affichez proprement chaque résultat réseau. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?

Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Interface de chargement, de réussite et d’erreur » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?

Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Définir une interface d’API Retrofit
  2. Analyser du JSON avec Moshi
  3. Appels suspend dans le ViewModel
  4. Interface de chargement, de réussite et d’erreur
← Retour à Jetpack Compose Academy