You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 6-async/02-promise-basics/article.md
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,8 +9,8 @@ Everyone is happy: you, because the people don't crowd you any more, and fans, b
9
9
This is a real-life analogy for things we often have in programming:
10
10
11
11
1. A "producing code" that does something and takes time. For instance, the code loads a remote script. That's a "singer".
12
-
2. A "consuming code" that wants the result of the "producing code" once it's ready. Many functions in your "consuming code" may need that result. These are "fans".
13
-
3. A *promise* is a special JavaScript object that links the "producing code" and the "consuming code" together. In terms of our analogy: this is the "subscription list". The "producing code" takes the time it needs to produce the promised result, and the "promise" makes it available to all of the subscribed code when it's ready.
12
+
2. A "consuming code" that wants the result of the "producing code" once it's ready. Many functions (in your "consuming code") may need that result. These are the "fans".
13
+
3. A *promise* is a special JavaScript object that links the "producing code" and the "consuming code" together. In terms of our analogy: this is the "subscription list". The "producing code" takes whatever time it needs to produce the promised result, and the "promise" makes that result available to all of the subscribed code when it's ready.
14
14
15
15
The analogy isn't terribly accurate, because JavaScript promises are more complex than a simple subscription list: they have additional features and limitations. But this will serve for an introduction.
16
16
@@ -22,7 +22,7 @@ let promise = new Promise(function(resolve, reject) {
22
22
});
23
23
```
24
24
25
-
The function passed to `new Promise` is called the *executor*. When the promise is created, this executor function is called (run) automatically. It contains the producing code, that should eventually produce a result. In terms of the analogy above: the executor is the "singer".
25
+
The function passed to `new Promise` is called the *executor*. When the promise is created, this executor function is called (or, run) automatically. It contains the producing code, that should eventually produce a result. In terms of the analogy above: the executor is the "singer".
26
26
27
27
The resulting `promise` object has internal properties:
28
28
@@ -57,7 +57,7 @@ let promise = new Promise(function(resolve, reject) {
57
57
We can see two things by running the code above:
58
58
59
59
1. The executor is called automatically and immediately (by the `new Promise`).
60
-
2. The executor receives two arguments: `resolve` and `reject` — these functions are pre-defined. We don't need to create them. Instead, we should write the executor to call them when ready.
60
+
2. The executor receives two arguments: `resolve` and `reject` — these functions are pre-defined by the JavaScript engine. So we don't need to create them. Instead, we should write the executor to call them when ready.
61
61
62
62
After one second of "processing" the executor calls `resolve("done")` to produce the result:
63
63
@@ -94,7 +94,7 @@ let promise = new Promise(function(resolve, reject) {
94
94
});
95
95
```
96
96
97
-
The idea is that a job done by the executor may have only one result or an error. (If you are familiar with other languages, you might be aware of data structures which allow many "flowing" results, like streams and queues. They have their own advantages and disadvantages as compared with Promises. But as they are not supported by the JavaScript core, we won't be covering them.)
97
+
The idea is that a job done by the executor may have only one result or an error.
98
98
99
99
Further, `resolve`/`reject` expect only one argument and will ignore additional arguments.
100
100
````
@@ -112,7 +112,7 @@ let promise = new Promise(function(resolve, reject) {
112
112
});
113
113
```
114
114
115
-
For instance, it might happen when we start to do a job but then see that everything has already been completed. That is fine: we have a resolved Promise immediately.
115
+
For instance, this might happen when we start to do a job but then see that everything has already been completed. That is fine: we immediately have a resolved Promise.
116
116
````
117
117
118
118
```smart header="The `state` and `result` are internal"
@@ -174,7 +174,7 @@ promise.then(
174
174
);
175
175
```
176
176
177
-
If we're interested only in successful Promises, then we can provide only one function argument to `.then`:
177
+
If we're interested only in successful completions, then we can provide only one function argument to `.then`:
178
178
179
179
```js run
180
180
let promise = new Promise(resolve => {
@@ -186,7 +186,7 @@ promise.then(alert); // shows "done!" after 1 second
186
186
*/!*
187
187
```
188
188
189
-
If we're interested only in errors, then we can use `.catch(errorHandlingFunction)`, which is just like doing `.then(null, errorHandlingFunction)`.
189
+
If we're interested only in errors, then we can use `.catch(errorHandlingFunction)`, which is exactly the same as `.then(null, errorHandlingFunction)`.
190
190
191
191
192
192
```js run
@@ -216,14 +216,14 @@ That's handy for jobs that may sometimes require time and sometimes finish immed
216
216
````
217
217
218
218
````smart header="Handlers of `.then`/`.catch` are always asynchronous"
219
-
Even when the Promise is immediately resolved, code which occurs on lines below your `.then`/`.catch`can still run first. When the JavaScript engine sees your Promise, it will not only run the executor (the "producing code"), it will also go ahead and start executing code which occurs after your Promise and its `.then`/`.catch` calls.
219
+
Even when the Promise is immediately resolved, code which occurs on lines below your `.then`/`.catch`may still run first. When the JavaScript engine sees your Promise, it will not only run the executor (the "producing code"), it will also go ahead and start executing code which occurs after your Promise and its `.then`/`.catch` calls.
220
220
221
-
So, when it is time for the function passed to `.then`/`.catch` to execute (nearly immediately in the case of an immediately-resolved Promise), the JavaScript engine puts it into an internal execution queue which will then already have items to be run.
221
+
So, when it is time for the function passed to `.then`/`.catch` to execute (nearly immediately in the case of an immediately-resolved Promise), the JavaScript engine puts it into an internal execution queue (which will then already have items to be run).
222
222
223
223
The JavaScript engine is trying to do as many things at virtually the same time as possible. Everything is racing to get done. So, in the example code below, behind the scenes, you can imagine that the events might occur in this order:
224
224
225
225
1. The new Promise object is constructed on Line 2.
226
-
2. The subscriber on Line 4 (the call to `alert`) is be registered with the Promise.
226
+
2. The subscriber on Line 4 (the call to `alert`) is registered with the Promise.
227
227
3. The executor is run by the Promise object and immediately resolves.
228
228
4. The other `alert` call, on Line 6, is executed.
229
229
6. The Promise notices it has been resolved and therefore executes the registered call to `alert` from Line 4.
0 commit comments