What is the best way to generate a simulated API request in rxjs that triggers an error after a delay of 1 second?

Question

What is the best way to generate a simulated API request in rxjs that triggers an error after a delay of 1 second?

Explore the code playground here => https://stackblitz.com/edit/playground-rxjs-f8xjsh

Hello there, I'm attempting to replicate a failed API Call scenario where the error value should be emitted at the subscribe() { Error: } section.

import { from, of, pipe, forkJoin, interval, AsyncSubject, BehaviorSubject,defer, Subject, timer, observable, throwError } from 'rxjs';
import { concatMap, map, mergeMap, zipWith, delay, tap, concatAll, concat, concatWith, switchMap, catchError } from 'rxjs/operators';

const apiCall = (callNumber, isError=false) => of('Api Call Result ' + callNumber).pipe(
  tap(_=>console.log('Making API Call ' + callNumber)),
  delay(1000),
  tap(_=> throwError(() => new Error('ERROR')))
);

apiCall(99,true).subscribe({
  next: x=>console.log(x),
  error: e=>console.log(e)
});

Currently, the error is not getting caught or logged. Any assistance would be appreciated.

Stackblitz Link => https://stackblitz.com/edit/playground-rxjs-f8xjsh

typescript rxjs

Answer 1

Answer №1

This code snippet serves as a practical demonstration, inspired by the insights shared by @JSmart523

const fetchDataFromApi = (requestNumber: number, hasError = false) =>
  of('Data from API request ' + requestNumber).pipe(
    tap((_) => console.log('Executing some tasks before')),
    delay(1000),
    switchMap((_) => {
      if (hasError) {
        throw new Error(`ERROR`);
      } else {
        return of(_);
      }
    })
  );

fetchDataFromApi(99, true).subscribe({
  next: (result) => console.log(result),
  error: (err: Error) => console.log(err.message),
});

Answer 2

This code snippet serves as a practical demonstration, inspired by the insights shared by @JSmart523

const fetchDataFromApi = (requestNumber: number, hasError = false) =>
  of('Data from API request ' + requestNumber).pipe(
    tap((_) => console.log('Executing some tasks before')),
    delay(1000),
    switchMap((_) => {
      if (hasError) {
        throw new Error(`ERROR`);
      } else {
        return of(_);
      }
    })
  );

fetchDataFromApi(99, true).subscribe({
  next: (result) => console.log(result),
  error: (err: Error) => console.log(err.message),
});

Answer 3

Answer №2

tap executes a function and then sends out whatever it receives, without any alteration.

throwError is a feature that produces an observable result.

Therefore, someObservable.pipe(x) will give back an observable that generates an error if x is

```
map(() => { throw new Error('msg') })
```
, or
```
switchMap(() => throwError('msg'))
```

... alternatively, you can easily generate a new observable with throwError('msg')) without needing to use pipe...

however, using tap(() => anything) won't modify what the observable emits.

Answer 4

tap executes a function and then sends out whatever it receives, without any alteration.

throwError is a feature that produces an observable result.

Therefore, someObservable.pipe(x) will give back an observable that generates an error if x is

```
map(() => { throw new Error('msg') })
```
, or
```
switchMap(() => throwError('msg'))
```

... alternatively, you can easily generate a new observable with throwError('msg')) without needing to use pipe...

however, using tap(() => anything) won't modify what the observable emits.

What is the best way to generate a simulated API request in rxjs that triggers an error after a delay of 1 second?

Answer №1

Answer №2

Similar questions

Event triggered by clicking on certain coordinates

Property element does not exist in this basic TypeScript project

An issue encountered with NSwag in TypeScript-Angular involving enum property names and DateTime data type

Keep the code running in JavaScript even in the presence of TypeScript errors

Create a function with an optional argument when the type can be inferred as an empty object

What is the most effective way to loop through a JSON object and apply filtering based on user input?

Experiencing an issue when attempting to deploy Strapi CMS with TypeScript on Railway - encountering the error message: "Unable to locate module 'typescript'"

Updating the color of specific buttons using ngFor in Typescript and Angular 8

Tips for widening a union data type in a different section?

Connecting Angular modules via npm link is a great way to share common

Why isn't the real-time database updating properly?

Prettier mandates that single-line if-statements without curly braces must be written on the same line

Change character casing automatically when typing in a snippet in Visual Studio Code

What is the best way to retrieve specific values from an ng-bootstrap modal?

Bringing a JavaScript function into a TypeScript file results in it being treated as a namespace

What is the reason behind the error Generic indexed type in Typescript?

Creating a custom definition file for TypeScript

Elucidate a crucial aspect within a broad context

Can anyone help me with coloring Devanagiri diacritics in ReactJS?

What is the proper way to utilize the router next function for optimal performance