[Solved] You wrote this Angular code:loading = false; error = ''; fetchData() { this.loading = true; fetch('api/data') .then(() => this.... }What is the problem with this code regarding loading state? | Angular

Angular - HTTP Client

You wrote this Angular code:

loading = false;
error = '';

fetchData() {
  this.loading = true;
  fetch('api/data')
    .then(() => this.loading = false)
    .catch(() => this.error = 'Error');
}

What is the problem with this code regarding loading state?

ALoading is never set to false on error

BError message is not set on success

CLoading is set to true twice

DFetch URL is incorrect

Step-by-Step Solution

Solution:

Step 1: Check loading state changes on success and error
Loading is set false only in then, not in catch.
Step 2: Identify missing loading reset on error
On error, loading remains true, causing UI to show loading indefinitely.
Final Answer:
Loading is never set to false on error -> Option A
Quick Check:
Always reset loading false on both success and error [OK]

Quick Trick: Set loading false in both then and catch blocks [OK]

Common Mistakes:

MISTAKES

Forgetting loading false on error
Assuming error sets loading false automatically
Ignoring error message setting

Master "HTTP Client" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

You wrote this Angular code:

Step 1: Check loading state changes on success and error

Step 2: Identify missing loading reset on error

Final Answer:

Quick Check:

Want More Practice?