What's the alternative now that Observable `of` is no longer supported?

Question

What's the alternative now that Observable `of` is no longer supported?

I have a situation where I possess an access token, and if it is present, then I will return it as an observable of type string:

if (this.accessToken){
  return of(this.accessToken);
}

However, I recently realized that the of method has been deprecated with the message:

of is deprecated: use scheduled instead 'scheduled([a, b, c], scheduler)' (deprecation)

The new syntax using scheduled seems more complex. Does anyone know the equivalent version of the simple of using scheduled? The name of the keyword makes it challenging to search for information on it.

Appreciate any insights!

javascript angular typescript rxjs

Answer 1

Answer №1

Only certain overloads that accept a scheduler have been marked as deprecated. The particular variant you are utilizing is still supported and not subject to deprecation. For more detailed information, refer to https://example.com/unique-link

Answer 2

Only certain overloads that accept a scheduler have been marked as deprecated. The particular variant you are utilizing is still supported and not subject to deprecation. For more detailed information, refer to https://example.com/unique-link

Answer 3

Answer №2

As mentioned previously, the feature is not outdated.

If you are in the process of transitioning from RxJS v5 to RxJS v6, here's what you need to do:

The basic observable operations such as of, map, filter, etc

Observable.of(1,2,3).map(x => 2 * x);

This operation now looks like this:

import {of, map} from 'rxjs';
import {map} from 'rxjs/operators';

of(1,2,3).pipe(map(x => 2 * x));

For more information, visit https://www.learnrxjs.io/concepts/rxjs5-6.html

Answer 4

As mentioned previously, the feature is not outdated.

If you are in the process of transitioning from RxJS v5 to RxJS v6, here's what you need to do:

The basic observable operations such as of, map, filter, etc

Observable.of(1,2,3).map(x => 2 * x);

This operation now looks like this:

import {of, map} from 'rxjs';
import {map} from 'rxjs/operators';

of(1,2,3).pipe(map(x => 2 * x));

For more information, visit https://www.learnrxjs.io/concepts/rxjs5-6.html

Answer 5

Answer №3

@john-doe has a good point, and if you ever find yourself needing to replicate the behavior of of(1, 2, 3), you can use the following commands:

import {queueScheduler, scheduled} from "rxjs";
scheduled([1, 2, 3], queueScheduler);

Alternatively, you can also achieve this with:

import {animationFrameScheduler, scheduled} from "rxjs";
scheduled([1, 2, 3], animationFrameScheduler);

To delve deeper into queue scheduling, check out: https://rxjs.dev/api/index/const/queueScheduler

Answer 6

@john-doe has a good point, and if you ever find yourself needing to replicate the behavior of of(1, 2, 3), you can use the following commands:

import {queueScheduler, scheduled} from "rxjs";
scheduled([1, 2, 3], queueScheduler);

Alternatively, you can also achieve this with:

import {animationFrameScheduler, scheduled} from "rxjs";
scheduled([1, 2, 3], animationFrameScheduler);

To delve deeper into queue scheduling, check out: https://rxjs.dev/api/index/const/queueScheduler

Answer 7

Answer №4

In the event that you possess a scheduler, the corresponding function for of(item, scheduler) would be scheduled([item], scheduler). In case you are already providing an array of items as input, there is no need for the brackets.

Answer 8

In the event that you possess a scheduler, the corresponding function for of(item, scheduler) would be scheduled([item], scheduler). In case you are already providing an array of items as input, there is no need for the brackets.

Answer 9

Answer №5

It is crucial to ensure you are importing the necessary components accurately. Below is an example provided for your guidance.

import { map } from 'rxjs/operators';

const httpOptions = {
headers: new HttpHeaders({
  'Content-type':  'application/json'
  })
};

return this.http.post(this.baseUrl + 'login', model, httpOptions).pipe(map((response : any) => {
const user = response.json();
if (user.accessToken){
  localStorage.setItem('token', user.accessToken);
  return user.accessToken;
} }))

Answer 10

It is crucial to ensure you are importing the necessary components accurately. Below is an example provided for your guidance.

import { map } from 'rxjs/operators';

const httpOptions = {
headers: new HttpHeaders({
  'Content-type':  'application/json'
  })
};

return this.http.post(this.baseUrl + 'login', model, httpOptions).pipe(map((response : any) => {
const user = response.json();
if (user.accessToken){
  localStorage.setItem('token', user.accessToken);
  return user.accessToken;
} }))

What's the alternative now that Observable `of` is no longer supported?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How to dismiss a jQueryMobile dialog without triggering a page refresh

Certain images are being rotated in a counter clockwise direction by 90 degrees

Tips for sharing a global variable in Node.js multi-cluster mode while running Socket.IO on an NGINX load balancer but using fork mode with PM2

What is the best way to define ngOptionValue for my ng-option selection?

Substitute the website address using regular expressions

What is the best way to set the active class on the initial tab that is determined dynamically rather than a static tab in Angular?

Executing javascript function using setInterval

Grails is experiencing a surge of duplicate events being triggered simultaneously

Using Vuejs to implement pagination on a weekly basis

Guide to uploading a PDF to Google Drive and embedding it on an HTML static website

Is it possible to verify if an object matches a type without explicitly setting it as that type?

What is the significance of the any type in Typescript?

What is the best method to delete a value from localStorage using redux-persist?

Utilizing a Material UI custom theme in React with Typescript: A step-by-step guide

Utilizing AngularJS filter method to populate data

A warning has been issued: CommonsChunkPlugin will now only accept one argument

Why has Jasmine decided not to wait for my promises to finish?

When Vue.js is compiled, it removes a script tag

What is the process for activating my redux function within a component?

Concealing content to prevent it from being accessed through HTML and JavaScript inspection techniques