前言
RxJS 是一个功能强大的响应式编程库，被广泛用于前端开发领域。RxJS 中的 from 方法是一个将任意的可迭代对象、Promise 和其它数据类型转成 observable 对象的功能函数，今天我们来一起学习它的使用。
from 方法的基本用法
from 方法的基本语法如下：
from<T>( input: ObservableInput<T>, mapFn?: function(value: T, index: number): T, thisArg?: any ): Observable<T>;
其中，input 是一个可以被转化为可观察对象的输入数据，可以是数组、Set、Map、Promise 等。mapFn 是一个可选的映射函数，会在从 input 转化为 observable 对象时对数据进行处理。thisArg 是指定映射函数中 this 的值。
以下是一个使用 from 方法转化数组为 observable 对象的示例代码：
import { from } from 'rxjs';
const array = [1, 2, 3, 4, 5];
const observable = from(array);
observable.subscribe(value => console.log(value));输出结果：
1 2 3 4 5
示例代码中首先声明了一个数组，然后通过 from 方法将其转化为了一个 observable 对象。最后通过订阅的方式输出了该 observable 对象中的值。注意，输出的结果和数组的顺序一致。可以看到，虽然我们并没有手动使用 for 循环遍历数组，但是通过 from 方法将其转化为可观察对象后，我们依然可以通过订阅的方式获得数组中的每一个值。
处理数组元素
from 方法除了可以将数组转化为 observable 对象外，还可以通过传入一个可选的映射函数，对数组中的每一个元素进行处理。
以下是一个将数组中的元素平方后，通过 from 方法转化为 observable 对象的示例代码：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ----- ----- - --- -- -- -- --- ----- ----- - ----- -- ----- -- -- ----- ---------- - ----------- ------- -------------------------- -- --------------------
输出结果：
1 4 9 16 25
示例代码中，我们首先声明了一个数组，并通过 mapFn 函数对其中的每一个元素进行了平方操作。然后通过 from 方法将处理后的数组转化为了一个 observable 对象，最后通过订阅的方式输出了 observable 对象中的每一个元素。可以看到，最终输出的数组中每一个元素都已经被平方了。
处理 Promise
RxJS 中 from 方法可以接受 Promise 并将其转化为 observable 对象，只需要将 Promise 对象作为 from 方法的参数传入即可。
以下是一个将一个异步的 Promise 对象转化为 observable 对象的示例代码：
-- -------------------- ---- -------
------ - ---- - ---- -------
----- ------- - --- --------------- -- -
------------- -- -
-------------- ---------
-- ------
---
----- ---------- - --------------
-------------------------- -- --------------------输出结果：
Hello World!
示例代码中，我们先声明了一个异步的 Promise 对象，然后通过 from 方法将其转化为了一个 observable 对象。最后通过订阅的方式输出了 observable 对象中 resolve 后的值。可以看到，我们并没有手动地在 resolve 回调中输出值，但是通过将 Promise 转化为 observable 对象后，还是可以通过订阅的方式输出其 resolve 的值。
常见问题解答
Q：如何将数组和 Promise 表示为一个元素？
A：可以使用 RxJS 中的 of 方法将数组和 Promise 包装成 observable 对象。
以下是一个将数组和 Promise 转化为 observable 对象的示例代码：
-- -------------------- ---- -------
------ - ----- -- - ---- -------
----- ----- - --- -- -- -- ---
----- ------- - --- --------------- -- -
------------- -- -
-------------- ---------
-- ------
---
----- ---------- - --------- -------- ---
-------------------------- -- --------------------输出结果：
[ 1, 2, 3, 4, 5 ] Hello World! 6
可以看到，在将数组和 Promise 通过 of 方法包装成 observable 对象后，它们被作为一个元素被打印输出了。
Q：如何将多个 Promise 合并成一个 observable 对象？
A：使用 RxJS 中的 concat 方法可以将多个 Promise 合并成一个 observable 对象。
以下是一个将多个 Promise 合并成一个 observable 对象的示例代码：
-- -------------------- ---- -------
------ - ----- ------ - ---- -------
----- -------- - --- --------------- -- -
------------- -- -
---------------- ----
-- -----
---
----- -------- - --- --------------- -- -
------------- -- -
---------------- ----
-- ------
---
----- -------- - --- --------------- -- -
------------- -- -
---------------- ----
-- ------
---
----- ---------- - ---------------------- --------------- ----------------
-------------------------- -- --------------------输出结果：
Promise 1 Promise 2 Promise 3
可以看到，在将多个 Promise 通过 concat() 方法合并后，它们依次被顺序打印输出了。这种方式能够确保每个 Promise 中的数据都被完整地输出。
总结
RxJS 的 from 方法是一个能够将任意数据类型转化为可观察对象的函数。在前端开发领域中，能够灵活使用 from 方法将异步和同步数据转化为 observable 对象，将会大大简化编程工作的难度，并提高代码的可维护性和可读性。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b12b0348841e9894d8164e