## When to use `retryWhen` Use `retryWhen` when you need custom retry logic, such as: - Controlling the number of retries - Setting the delay between retries - Performing side effects before retrying It is ideal for intermittent errors where you want to attempt a recovery strategy before failing completely (e.g., retrying a network request a few times). ### Key Differences | Feature | `catchError` | `retryWhen` | |------------------|-------------------------------------------------------|----------------------------------------------------| | **Error Handling** | Used for error handling, providing a fallback value or observable. | Used to retry an observable after an error occurs based on custom logic. | | **Recovery** | Replaces the failed observable. | Continues the observable by retrying after an error. | | **Flow Control** | Can terminate the stream with an alternative. | Re-emits the observable after handling the error conditionally. | ### Example Combining Both You can combine `catchError` and `retryWhen` to handle retries in a controlled manner while also dealing with fallback options. ```typescript import { of, throwError } from 'rxjs'; import { catchError, retryWhen, delay, take } from 'rxjs/operators'; const observable$ = new Observable((observer) => { observer.next(1); observer.next(2); observer.error('Something went wrong!'); }); observable$.pipe( retryWhen(errors => errors.pipe( delay(1000), take(3) )), catchError(error => { console.error('All retries failed:', error); return of('Fallback Value'); }) ).subscribe( value => console.log(value), err => console.log('Error:', err) ); ``` In this example, the observable retries up to 3 times after an error. If all retries fail, it falls back to a predefined value using `catchError`. This combination of operators ensures the robustness of your observable streams in handling errors and retries! --- ## Different Types of Schedulers in RxJS In RxJS, Schedulers are a fundamental concept that control the execution timing of observables and operators. They allow you to manage the timing and concurrency of tasks in the reactive stream. Understanding how to use and control scheduling is crucial for efficient asynchronous programming. Here are the key types of schedulers in RxJS: ### 1. Async Scheduler - **Purpose**: Used for asynchronous execution. - **When to use**: Schedule tasks for execution in the future but as soon as the current synchronous tasks have been completed. - **How it works**: Schedules tasks to be executed asynchronously in the event loop, ensuring that the task won't block the current synchronous code. **Example**: ```typescript import { of } from 'rxjs'; import { observeOn } from 'rxjs/operators'; of(1, 2, 3).pipe( observeOn(async) // This uses the async scheduler ).subscribe(value => console.log(value)); ``` In this example, the values will be emitted asynchronously after the current synchronous execution finishes. ### 2. Queue Scheduler - **Purpose**: Schedules tasks in a FIFO (First In, First Out) queue, ensuring they are executed in order without blocking the main thread. - **When to use**: Delay a task execution without creating a new event loop cycle, such as managing back pressure in an event-driven system. - **How it works**: Places tasks in a queue and executes them right after the current synchronous code finishes. **Example**: ```typescript import { of } from 'rxjs'; import { observeOn } from 'rxjs/operators'; of(1, 2, 3).pipe( observeOn(queue) // This uses the queue scheduler ).subscribe(value => console.log(value)); ``` The output of the above example would be logged in the order 1, 2, 3, but after all synchronous code has completed execution. ### 3. AnimationFrames Scheduler - **Purpose**: Used for scheduling tasks to run in sync with the browser's animation frames (approximately every 16 milliseconds). - **When to use**: Synchronize actions with browser rendering (e.g., animating elements in sync with the browser's refresh rate). - **How it works**: Schedules actions to be executed just before the browser’s next animation frame. **Example**: ```typescript import { interval } from 'rxjs'; import { observeOn } from 'rxjs/operators'; interval(1000).pipe( observeOn(animationFrames) // Use animationFrames scheduler ).subscribe(value => console.log(value)); ``` In this example, the value will be emitted and logged based on the timing of the browser's animation frame. ### 4. Scheduler Comparison | Scheduler | Description | |-------------------|---------------------------------------------------------------------------------------------------| | **async** | Schedules tasks to run asynchronously in the next event loop iteration. | | **queue** | Schedules tasks to run after the current synchronous code but within the same event loop cycle. | | **animationFrames**| Schedules tasks to run in sync with the browser's animation frame (~60 times per second). | | **timeout** | Schedules tasks to run after a specified delay. | ### 5. Practical Use Cases - **async**: Handling asynchronous requests, waiting for the completion of tasks before executing the next one. - **queue**: Ensuring tasks run without blocking synchronous code, suitable for backpressure or ensuring order in event-driven systems. - **animationFrames**: Animating elements or handling frame-by-frame rendering in animations and UI updates. --- ## Form Validation in HTML Form validation in HTML can be implemented using built-in validation attributes that the browser can automatically recognize and act upon — no JavaScript needed for basic use cases. ### Built-in Form Validation Attributes Here are the most common HTML5 attributes used for client-side validation: - **required**: Ensures that the field must be filled out before submitting the form. - **minlength**: Specifies the minimum number of characters required in an input. - **maxlength**: Specifies the maximum number of characters allowed. - **min**: Minimum value for numeric or date input. - **max**: Maximum value for numeric or date input. - **pattern**: Defines a regular expression the input must match. - **type**: Specifies the type of data (like email, number, url, tel, date). - **step**: Defines the valid intervals (e.g., for number: `step="0.01"` for 2 decimal places). - **autocomplete**: Controls whether the browser should autofill the input. - **readonly**: Makes the field non-editable but still sent with the form. - **disabled**: Makes the field non-editable and not submitted. ### Example: Simple HTML Form with Built-in Validation ```html ```

Observables