mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
42289f25c6
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
35 lines
1.5 KiB
Markdown
35 lines
1.5 KiB
Markdown
# Practical observable usage
|
|
|
|
Here are some examples of domains in which observables are particularly useful.
|
|
|
|
## Type-ahead suggestions
|
|
|
|
Observables can simplify the implementation of type-ahead suggestions.
|
|
Typically, a type-ahead has to do a series of separate tasks:
|
|
|
|
* Listen for data from an input
|
|
* Trim the value \(remove whitespace\) and make sure it's a minimum length
|
|
* Debounce \(so as not to send off API requests for every keystroke, but instead wait for a break in keystrokes\)
|
|
* Don't send a request if the value stays the same \(rapidly hit a character, then backspace, for instance\)
|
|
* Cancel ongoing AJAX requests if their results will be invalidated by the updated results
|
|
|
|
Writing this in full JavaScript can be quite involved.
|
|
With observables, you can use a simple series of RxJS operators:
|
|
|
|
<code-example header="Typeahead" path="practical-observable-usage/src/typeahead.ts"></code-example>
|
|
|
|
## Exponential backoff
|
|
|
|
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:
|
|
|
|
<code-example header="Exponential backoff" path="practical-observable-usage/src/backoff.ts"></code-example>
|
|
|
|
<!-- links -->
|
|
|
|
<!-- external links -->
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2022-02-28
|