5 lines
13 KiB
JSON
5 lines
13 KiB
JSON
|
{
|
||
|
|
"id": "guide/comparing-observables",
|
||
|
|
"title": "Observables compared to other techniques",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/comparing-observables.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"observables-compared-to-other-techniques\">Observables compared to other techniques<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/comparing-observables#observables-compared-to-other-techniques\"><i class=\"material-icons\">link</i></a></h1>\n<p>You can often use observables instead of promises to deliver values asynchronously. Similarly, observables can take the place of event handlers. Finally, because observables deliver multiple values, you can use them where you might otherwise build and operate on arrays.</p>\n<p>Observables behave somewhat differently from the alternative techniques in each of these situations, but offer some significant advantages. Here are detailed comparisons of the differences.</p>\n<h2 id=\"observables-compared-to-promises\">Observables compared to promises<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/comparing-observables#observables-compared-to-promises\"><i class=\"material-icons\">link</i></a></h2>\n<p>Observables are often compared to promises. Here are some key differences:</p>\n<ul>\n<li>\n<p>Observables are declarative; computation does not start until subscription. Promises execute immediately on creation. This makes observables useful for defining recipes that can be run whenever you need the result.</p>\n</li>\n<li>\n<p>Observables provide many values. Promises provide one. This makes observables useful for getting multiple values over time.</p>\n</li>\n<li>\n<p>Observables differentiate between chaining and subscription. Promises only have <code>.then()</code> clauses. This makes observables useful for creating complex transformation recipes to be used by other part of the system, without causing the work to be executed.</p>\n</li>\n<li>\n<p>Observables <code>subscribe()</code> is responsible for handling errors. Promises push errors to the child promises. This makes observables useful for centralized and predictable error handling.</p>\n</li>\n</ul>\n<h3 id=\"creation-and-subscription\">Creation and subscription<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/comparing-observables#creation-and-subscription\"><i class=\"material-icons\">link</i></a></h3>\n<ul>\n<li>\n<p>Observables are not executed until a consumer subscribes. The <code>subscribe()</code> executes the defined behavior once, and it can be called again. Each subscription has its own computation. Resubscription causes recomputation of values.</p>\n<code-example path=\"comparing-observables/src/observables.ts\" header=\"src/observables.ts (observable)\" region=\"observable\">\n\n// declare a publishing operation\nconst observable = new Observable<number>(observer => {\n // Subscriber fn...\n});\n\n// initiate execution\nobservable.subscribe(value => {\n // observer handles notifications\n});\n\n\n</code-example>\n</li>\n<li>\n<p>Promises execute immediately, and just once. The computation of the result is initiated when the promise is created. There is no way to restart work. All <code>then</code> clauses (subscriptions) share the same computation.</p>\n<code-example path=\"comparing-observables/src/promises.ts\" header=\"src/promises.ts (promise)\" region=\"promise\">\n// initiate execution\nlet promise = new Promise<number>((resolve, reject) => {\n // Executer fn...\n});\npromise.then(value => {\n // handle result here\n});\n\n</code-example>\n</li>\n</ul>\n<h3 id=\"chaining\">Chaining<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/comparing-observables#chaining\"><i class=\"material-icons\">link</i></a></h3>\n<ul>\n<li>\n<p>Observables differentiate between t
|
||
|
|
}
|