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: control-flow/index.md
+15-13Lines changed: 15 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,9 +27,9 @@ Thankfully Node offers 3 approaches we can use to control the order in which our
27
27
28
28
Earlier in Node's development, it was common to use the _callback pattern_ to control the order that code is executed. The pattern involves passing a function as a parameter (_callback_) into your functions, and then calling that _callback_ when you're ready to continue.
29
29
30
-
### Example
30
+
Let's say we have to get some data from an external service. We don't know how long this service might take to respond. We would need to wait until the service responds, we can't simply continue running code as we might need the response.
31
31
32
-
Let's say we have to get some data from an external service. To simulate this I've created a `randomDelayedResponse` function that will return a response after an unspecified amount of time.
32
+
To simulate this I've created a `randomDelayedResponse` function that will return a response after an unspecified amount of time.
If we wanted to get the response we need to wait until the response it ready. One way is to pass out final `console.log` in as a function like so:
48
+
Notice that the final line above returns `undefined`.
49
+
50
+
We need to wait until the response is ready. One way is to pass our `console.log` in to `randomDelayedResponse` as a function.
49
51
50
52
```
51
53
function randomDelayedResponse(text, callback) {
@@ -60,11 +62,11 @@ const output = randomDelayedResponse('Hello', text => console.log(text)); // out
60
62
console.log(output); // still empty
61
63
```
62
64
63
-
Here we are passing the function `text => console.log(text)` as the second parameter, and this function is then called after the `setTimeout`.
65
+
We pass the function `text => console.log(text)` as the second parameter, and this function is then called after the `setTimeout`.
64
66
65
-
This might be reasonable at this level, but it's easy for callbacks to get out of control. For example, if we have two different calls to this slow function that need to be run in order, we need to nest further.
67
+
This might be reasonable in simple situations but it's easy for callbacks to get out of control. For example, if we have many different calls to this slow function that need to be run in order. To achieve this control we need to nest further.
66
68
67
-
If we ran them beside each other, they would not be reliable:
69
+
To show many responses, consider the following code. If we ran them beside each other, the output would not be reliable.
68
70
69
71
```
70
72
function randomDelayedResponse(text, callback) {
@@ -75,14 +77,14 @@ function randomDelayedResponse(text, callback) {
75
77
}, timeOut * 10);
76
78
}
77
79
78
-
randomDelayedResponse('Runner 1', text => console.log(text)); // outputs "Runner 1"
79
-
randomDelayedResponse('Runner 2', text => console.log(text)); // outputs "Runner 2"
80
-
randomDelayedResponse('Runner 3', text => console.log(text)); // outputs "Runner 3"
81
-
randomDelayedResponse('Runner 4', text => console.log(text)); // outputs "Runner 4"
80
+
randomDelayedResponse(1, text => console.log(text)); // outputs 1
81
+
randomDelayedResponse(2, text => console.log(text)); // outputs 2
82
+
randomDelayedResponse(3, text => console.log(text)); // outputs 3
83
+
randomDelayedResponse(4, text => console.log(text)); // outputs 4
82
84
// Who will win?
83
85
```
84
86
85
-
You can run the above code multiple times, and the result is unpredictable. To create a predictableflow using callbacks we'd need to nest them more:
87
+
We can run the above code multiple times, and the result is unpredictable. It is _asynchronous_, in that the results do not arrive in order. To create a predictable, _synchronous_flow using callbacks we'd need to nest them.
86
88
87
89
```
88
90
function randomDelayedResponse(text, callback) {
@@ -107,7 +109,7 @@ randomDelayedResponse(1, text => {
107
109
}); // outputs "1 2 3 4"
108
110
```
109
111
110
-
As we can see, structuring these callbacks does work but can quickly become difficult to read. This example is very simple so we can see how more complex code nested in this way would become difficult to follow. Let's look at another way.
112
+
Structuring these callbacks works. However this approach can create code becomes difficult to understand and maintain. Let's look at another way.
111
113
112
114
## Promises
113
115
@@ -170,7 +172,7 @@ Promises remove a lot of nesting and give us easier to read code. However there
170
172
171
173
## Async / Await
172
174
173
-
The third approach is built on top of the existing _promises_ approach but makes it easier to reason with. With `async` and `await` we can write code that feels a lot more like the simple top-down code, by telling it to wait when we need it to. Let's rewrite our _who would win?_ example from above.
175
+
The third approach is built on top of the existing _promises_ approach but makes it easier to reason with. With `async` and `await` we can write code that feels a lot more like the simple top-down code, by telling it to wait when we need it to. Let's rewrite our _who will win?_ example from above.
0 commit comments