blocks|key|2877122|text|何时使用Subject.prototype.asObservable()|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2877123|这样做的目的是为了防止主体的“观察者端”从API中泄漏出来。当你不希望人们能够“下一步”进入最终的可观察对象时，基本上是为了防止泄漏的抽象。|2877124|示例|2877125|(注意:这确实不是您应该如何将这样的数据源转换为Observable的方法，而应该使用new+Observable构造函数，如下所示)。|offset|length|style|CODE|2877126|const+myAPI+=+{
++getData:+()+=>+{
++++const+subject+=+new+Subject();
++++const+source+=+new+SomeWeirdDataSource();
++++source.onMessage+=+(data)+=>+subject.next({+type:+'message',+data+});
++++source.onOtherMessage+=+(data)+=>+subject.next({+type:+'othermessage',+data+});
++++return+subject.asObservable();
++}
};|code-block|syntax|javascript|2877127|现在，当有人从myAPI.getData()获得可观察的结果时，他们不能将值next到结果中：|2877128|const+result+=+myAPI.getData();
result.next('LOL+hax!');+//+throws+an+error+because+`next`+doesn't+exist|2877129|不过，您通常应该使用new+Observable()|2877130|在上面的例子中，我们可能正在创建一些我们不想创建的东西。首先，getData()不像大多数可观察对象那样懒惰，它将立即创建底层数据源SomeWeirdDataSource+(以及一些副作用)。这也意味着如果你retry或者repeat得到的观察值，它不会像你想的那样工作。|2877131|最好将数据源的创建封装在可观察对象中，如下所示：|2877132|const+myAPI+=+{
++getData:+()+=>+return+new+Observable(subscriber+=>+{
++++const+source+=+new+SomeWeirdDataSource();
++++source.onMessage+=+(data)+=>+subscriber.next({+type:+'message',+data+});
++++source.onOtherMessage+=+(data)+=>+subscriber.next({+type:+'othermessage',+data+});
++++return+()+=>+{
++++++//+Even+better,+now+we+can+tear+down+the+data+source+for+cancellation!
++++++source.destroy();
++++};
++});
}|2877133|有了上面的代码，任何行为，包括使它“不懒惰”，都可以使用RxJS的现有操作符在可观察对象的顶部进行组合。|2877134|entityMap^0|0|0|0|17|E|0|0|7|F|12|4|0|0|A|G|0|V|9|1U|J|2W|5|33|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|19|8|@$H|1A|I|1B|J|K]]|9|@]|A|$]]|$1|L|3|M|5|N|7|1C|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1D|8|@$H|1E|I|1F|J|K]|$H|1G|I|1H|J|K]]|9|@]|A|$]]|$1|S|3|T|5|N|7|1I|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1J|8|@$H|1K|I|1L|J|K]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1M|8|@$H|1N|I|1O|J|K]|$H|1P|I|1Q|J|K]|$H|1R|I|1S|J|K]|$H|1T|I|1U|J|K]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1V|8|@]|9|@]|A|$]]|$1|10|3|11|5|N|7|1W|8|@]|9|@]|A|$O|P]]|$1|12|3|13|5|6|7|1X|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|15|$]]

<h2>When to use Subject.prototype.asObservable()</h2>
The purpose of this is to prevent leaking the &quot;observer side&quot; of the Subject out of an API. Basically to prevent a leaky abstraction when you don't want people to be able to &quot;next&quot; into the resulting observable.
<h3>Example</h3>
(NOTE: This really isn't how you should make a data source like this into an Observable, instead you should use the <code>new Observable</code> constructor, See below).
<pre class="lang-js prettyprint-override"><code>const myAPI = {
 getData: () =&gt; {
 const subject = new Subject();
 const source = new SomeWeirdDataSource();
 source.onMessage = (data) =&gt; subject.next({ type: 'message', data });
 source.onOtherMessage = (data) =&gt; subject.next({ type: 'othermessage', data });
 return subject.asObservable();
 }
};
</code></pre>
Now when someone gets the observable result from <code>myAPI.getData()</code> they can't <code>next</code> values in to the result:
<pre class="lang-js prettyprint-override"><code>const result = myAPI.getData();
result.next('LOL hax!'); // throws an error because `next` doesn't exist
</code></pre>
<h3>You should usually be using <code>new Observable()</code>, though</h3>
In the example above, we're probably creating something we didn't mean to. For one, <code>getData()</code> isn't lazy like most observables, it's going to create the underlying data source <code>SomeWeirdDataSource</code> (and presumably some side effects) immediately. This also means if you <code>retry</code> or <code>repeat</code> the resulting observable, it's not going to work like you think it will.
It's better to encapsulate the creation of your data source within your observable like so:
<pre class="lang-js prettyprint-override"><code>const myAPI = {
 getData: () =&gt; return new Observable(subscriber =&gt; {
 const source = new SomeWeirdDataSource();
 source.onMessage = (data) =&gt; subscriber.next({ type: 'message', data });
 source.onOtherMessage = (data) =&gt; subscriber.next({ type: 'othermessage', data });
 return () =&gt; {
 // Even better, now we can tear down the data source for cancellation!
 source.destroy();
 };
 });
}
</code></pre>
With the code above, any behavior, including making it &quot;not lazy&quot; can be composed on top of the observable using RxJS's existing operators.

blocks|key|2877230|text|Subject既可以充当observer，也可以充当observable.|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|2877231|一个Obervable有两个方法。|2877232|2877233|subscribe|unordered-list-item|2877234|unsubscribe|2877235|2877236|只要你订阅了一个observable，，你就会得到一个observer，上面有next、error和complete方法。|2877237|您需要隐藏该序列，因为您不希望流源在每个组件中都是公开可用的。你可以参考@BenLesh的例子，了解同样的情况。|2877238|附言:当我第一次使用反应式Javascript时，我还不能理解asObservable.因为我必须确保我清楚地理解了基础知识，然后选择asObservable.:)|2877239|entityMap^0|0|7|C|8|Q|A|0|7|C|8|Q|A|0|2|9|2|9|0|0|0|0|0|8|A|R|8|8|A|R|8|0|10|8|0|V|C|1V|C|V|C|1V|C|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|D]|$9|16|A|17|B|D]|$9|18|A|19|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|D]]|E|@]|F|$]]|$1|I|3|-4|5|6|7|1F|8|@]|E|@]|F|$]]|$1|J|3|K|5|L|7|1G|8|@]|E|@]|F|$]]|$1|M|3|N|5|L|7|1H|8|@]|E|@]|F|$]]|$1|O|3|-4|5|6|7|1I|8|@]|E|@]|F|$]]|$1|P|3|Q|5|6|7|1J|8|@$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|D]|$9|1Q|A|1R|B|D]]|E|@]|F|$]]|$1|R|3|S|5|6|7|1S|8|@$9|1T|A|1U|B|D]]|E|@]|F|$]]|$1|T|3|U|5|6|7|1V|8|@$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]|$9|20|A|21|B|D]|$9|22|A|23|B|D]]|E|@]|F|$]]|$1|V|3|-4|5|6|7|24|8|@]|E|@]|F|$]]]|W|$]]

A <code>Subject</code> can act both as an <code>observer</code> and an <code>observable</code>.

An <code>Obervable</code> has 2 methods.

<ul>
<li>subscribe</li>
<li>unsubscribe</li>
</ul>

Whenever you subscribe to an <code>observable</code>, you get an <code>observer</code> which has next, error and complete methods on it. 

You'd need to hide the sequence because you don't want the stream source to be publicly available in every component. You can refer to <code>@BenLesh</code>'s example, for the same.

P.S. : When I first-time came through Reactive Javascript, I was not able to understand <code>asObservable</code>. Because I had to make sure I understand the basics clearly and then go for <code>asObservable</code>. :)

blocks|key|2877265|text|除了this+answer之外，我还想提一下，在我看来，这取决于所使用的语言。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2877266|对于像JavaScript这样的无类型(或弱类型)语言，通过像asObservable()方法那样创建委托对象来对调用者隐藏源对象可能是有意义的。不过，如果你仔细想想，它不会阻止调用者执行observable.source.next(...)。因此，这种技术不能防止主题API泄漏，但它确实使其对调用者更隐蔽。|style|CODE|2877267|另一方面，对于像TypeScript这样的强类型语言，asObservable()方法似乎没有多大意义(如果有的话)。静态类型语言通过简单地利用类型系统(例如接口)来解决API泄漏问题。例如，如果您的getData()方法被定义为返回Observable<T>，那么您可以安全地返回原始Subject，并且如果试图对其调用getData().next()，调用者将得到一个编译错误。|2877268|想一下这个修改过的例子：|2877269|let+myAPI:+{+getData:+()+=>+Observable<any>+}

myAPI+=+{
++++getData:+()+=>+{
++++++++const+subject+=+new+Subject()
++++++++//+...+stuff+...
++++++++return+subject
++++}
}

myAPI.getData().next()+//+<---+error+TS2339:+Property+'next'+does+not+exist+on+type+'Observable<any>'|code-block|syntax|javascript|2877270|当然，因为它最终都会编译成JavaScript，所以在某些情况下，您可能仍然需要创建一个委托。但我的观点是，与使用普通的JavaScript相比，这些情况下的空间要小得多，而且在大多数情况下，您可能不需要使用这种方法。|2877271|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/36989035/96766^0|2|B|0|0|V|E|2M|R|0|R|E|2S|9|39|D|3Z|7|4H|G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@$A|15|B|16|F|G]|$A|17|B|18|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|19|8|@$A|1A|B|1B|F|G]|$A|1C|B|1D|F|G]|$A|1E|B|1F|F|G]|$A|1G|B|1H|F|G]|$A|1I|B|1J|F|G]]|9|@]|C|$]]|$1|J|3|K|5|6|7|1K|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1L|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|6|7|1M|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

In addition to <a href="https://stackoverflow.com/a/36989035/96766">this answer</a> I would mention that in my opinion it depends on the language in use.
For untyped (or weakly typed) languages like JavaScript it might make sense to conceal the source object from the caller by creating a delegate object like <code>asObservable()</code> method does. Although if you think about it it won't prevent a caller from doing <code>observable.source.next(...)</code>. So this technique doesn't prevent the Subject API from leaking, but it indeed makes it more hidden form the caller.
On the other hand, for strongly typed languages like TypeScript the method <code>asObservable()</code> doesn't seem to make much sense (if any).
Statically typed languages solve the API leakage problem by simply utilizing the type system (e.g. interfaces). For example, if your <code>getData()</code> method is defined as returning <code>Observable&lt;T&gt;</code> then you can safely return the original <code>Subject</code>, and the caller will get a compilation error if attempting to call <code>getData().next()</code> on it.
Think about this modified example:
<pre class="lang-js prettyprint-override"><code>let myAPI: { getData: () =&gt; Observable&lt;any&gt; }

myAPI = {
 getData: () =&gt; {
 const subject = new Subject()
 // ... stuff ...
 return subject
 }
}

myAPI.getData().next() // &lt;--- error TS2339: Property 'next' does not exist on type 'Observable&lt;any&gt;'
</code></pre>
Of course, since it all compiles to JavaScript in the end of the day there might still be cases when you want to create a delegate. But my point is that the room for those cases is much smaller then when using vanilla JavaScript , and probably in majority of cases you don't need that method.

I am wondering what is the use of <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/asobservable.md" rel="noreferrer"><code>asObservable</code></a>:

As per docs: 

<blockquote>
 An observable sequence that hides the identity of the
 source sequence.
</blockquote>

But why would you need to hide the sequence?

When to use asObservable() in rxjs?

我想知道有什么用根据文档：隐藏源序列身份的可观察序列。但是为什么你需要隐藏序列呢？

问什么时候在rxjs中使用asObservable()？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么时候在rxjs中使用asObservable()？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么时候在rxjs中使用asObservable()？
EN