from – RxJS Reference

from

Q: How do I convert a Promise into an Observable in RxJS?

Use the from() operator and pass the Promise as its argument, for example from(promise). The resulting observable waits for the promise to resolve, emits its value to the observer, and then sends a complete notification. If the promise is rejected, from() sends an error notification instead, so you can handle it with the usual catchError operator in an observable chain.

Q: How do I create an Observable from an array in RxJS?

Pass the array to from(), for example from(['a', 'b', 'c']). Each array member is emitted as a standalone value in sequence, and the observable completes once all items have been emitted. The same applies to array-like objects and to any iterable, so you can use from() with generators as well.

Q: Does from() emit strings character by character in RxJS?

Yes, from() emits a string as a sequence of its individual characters, because strings are iterable in JavaScript. For example, from('abc') emits 'a', 'b', and 'c' as separate values. If you want to emit the whole string as one value, wrap it in an array first with of('abc') or from(['abc']).

Q: How do I emit array items asynchronously with from() in RxJS?

Pass a scheduler as the second argument to from(), for example from(array, asyncScheduler). Without a scheduler, values are emitted synchronously during subscription. The scheduler controls when each value is delivered, so the emissions are shifted onto the scheduler's execution queue instead of happening immediately.

from is used to convert pure JavaScript object types like an Array (including array-like objects), a Promise and an iterable object into an observable sequence of values. It even works on an Observable-like objects, objects containing a function named with the ES2015 Symbol for Observable (Symbol.observable).

In the case of arrays and iterables, all contained values will be emitted as a sequence. The operator also emits a string as a sequence of characters. If you need to emit items asynchronously, the operator takes a scheduler as the second argument. When a promise needs to be used as part of an observable chain, from is often used to convert a promise into an observable.

from operator works in the following way:

Create an observable instance
If the parameter is Array, iterate over the source and emit array members as standalone values
If the parameter is Iterable, iterate over the source and emit members as standalone values
If the source is Promise, wait until the promise is resolved, and send the value to the observer. If the promise is rejected, send the error notification to the observer
When there are no more values in the data source, send the complete notification to the observer

Usage

from is commonly used operator when you need to create an observable sequence out of pure JavaScript types. Here’s an example that shows how to turn an Array, a Promise and an Iterable into a sequence of values:

const array = ['array-1', 'array-2', 'array-3'];
const promise = Promise.resolve('promise-1');
const iterable = iterator();

concat(
   from(array),
   from(iterable),
   from(promise)
).subscribe(x => console.log(x));

function* iterator() {
   const values = ['iterator-1', 'iterator-2', 'iterator-3'];
   for (let i = 0; i < values.length; i++) {
       yield values[i];
   }
}

Check this section to learn how concat operator works.

Playground

Additional resources

Official documentation

Frequently asked questions

How do I convert a Promise into an Observable in RxJS?

Use the from() operator and pass the Promise as its argument, for example from(promise). The resulting observable waits for the promise to resolve, emits its value to the observer, and then sends a complete notification. If the promise is rejected, from() sends an error notification instead, so you can handle it with the usual catchError operator in an observable chain.

How do I create an Observable from an array in RxJS?

Pass the array to from(), for example from(['a', 'b', 'c']). Each array member is emitted as a standalone value in sequence, and the observable completes once all items have been emitted. The same applies to array-like objects and to any iterable, so you can use from() with generators as well.

Does from() emit strings character by character in RxJS?

Yes, from() emits a string as a sequence of its individual characters, because strings are iterable in JavaScript. For example, from('abc') emits 'a', 'b', and 'c' as separate values. If you want to emit the whole string as one value, wrap it in an array first with of('abc') or from(['abc']).

How do I emit array items asynchronously with from() in RxJS?

Pass a scheduler as the second argument to from(), for example from(array, asyncScheduler). Without a scheduler, values are emitted synchronously during subscription. The scheduler controls when each value is delivered, so the emissions are shifted onto the scheduler's execution queue instead of happening immediately.

Share this post