5 lines
4.1 KiB
JSON
5 lines
4.1 KiB
JSON
|
{
|
|||
|
|
"id": "guide/practical-observable-usage",
|
|||
|
|
"title": "Practical observable usage",
|
|||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/practical-observable-usage.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=\"practical-observable-usage\">Practical observable usage<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/practical-observable-usage#practical-observable-usage\"><i class=\"material-icons\">link</i></a></h1>\n<p>Here are some examples of domains in which observables are particularly useful.</p>\n<h2 id=\"type-ahead-suggestions\">Type-ahead suggestions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/practical-observable-usage#type-ahead-suggestions\"><i class=\"material-icons\">link</i></a></h2>\n<p>Observables can simplify the implementation of type-ahead suggestions. Typically, a type-ahead has to do a series of separate tasks:</p>\n<ul>\n<li>Listen for data from an input.</li>\n<li>Trim the value (remove whitespace) and make sure it’s a minimum length.</li>\n<li>Debounce (so as not to send off API requests for every keystroke, but instead wait for a break in keystrokes).</li>\n<li>Don’t send a request if the value stays the same (rapidly hit a character, then backspace, for instance).</li>\n<li>Cancel ongoing AJAX requests if their results will be invalidated by the updated results.</li>\n</ul>\n<p>Writing this in full JavaScript can be quite involved. With observables, you can use a simple series of RxJS operators:</p>\n<code-example path=\"practical-observable-usage/src/typeahead.ts\" header=\"Typeahead\">\nimport { fromEvent } from 'rxjs';\nimport { ajax } from 'rxjs/ajax';\nimport { debounceTime, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';\n\nconst searchBox = document.getElementById('search-box');\n\nconst typeahead = fromEvent(searchBox, 'input').pipe(\n map((e: KeyboardEvent) => (e.target as HTMLInputElement).value),\n filter(text => text.length > 2),\n debounceTime(10),\n distinctUntilChanged(),\n switchMap(searchTerm => ajax(`/api/endpoint?search=${searchTerm}`))\n);\n\ntypeahead.subscribe(data => {\n // Handle the data from the API\n});\n\n\n</code-example>\n<h2 id=\"exponential-backoff\">Exponential backoff<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/practical-observable-usage#exponential-backoff\"><i class=\"material-icons\">link</i></a></h2>\n<p>Exponential backoff is a technique in which you retry an API after failure, making the time in between retries longer after each consecutive failure, with a maximum number of retries after which the request is considered to have failed. This can be quite complex to implement with promises and other methods of tracking AJAX calls. With observables, it is very easy:</p>\n<code-example path=\"practical-observable-usage/src/backoff.ts\" header=\"Exponential backoff\">\nimport { of, pipe, range, throwError, timer, zip } from 'rxjs';\nimport { ajax } from 'rxjs/ajax';\nimport { map, mergeMap, retryWhen } from 'rxjs/operators';\n\nexport function backoff(maxTries, delay) {\n return pipe(\n retryWhen(attempts =>\n zip(range(1, maxTries + 1), attempts).pipe(\n mergeMap(([i, err]) => (i > maxTries) ? throwError(err) : of(i)),\n map(i => i * i),\n mergeMap(v => timer(v * delay)),\n ),\n ),\n );\n}\n\najax('/api/endpoint')\n .pipe(backoff(3, 250))\n .subscribe(function handleData(data) { /* ... */ });\n\n</code-example>\n\n \n</div>\n\n<!-- links to this doc:\n-->\n<!-- links from this doc:\n - guide/practical-observable-usage#exponential-backoff\n - guide/practical-observable-usage#practical-observable-usage\n - guide/practical-observable-usage#type-ahead-suggestions\n - https://github.com/angular/angular/edit/master/aio/content/guide/practical-observable-usage.md?message=docs%3A%20describe%20yo
|
|||
|
|
}
|