/
main.html
152 lines (133 loc) · 5.64 KB
/
main.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<main>
<div class="content-r">
<h1>async-await</h1>
<hr/>
<p>In the previous post we saw that by a wrapper function we can somehow synchronize our promise function with out main thread (= main task).</p>
<p>This was the example:</p>
<pre><code class="language-javascript">const log = console.log.bind( console );
log( "--- start ---" );
function toUpperCaseLater( string ){
return new Promise(function( resolve ){
setTimeout(function(){
resolve( string.toUpperCase() );
}, 3000);
});
}
/*
function asycn2UpperCase( input ){
const lowerCase = input;
log( "lowerCase:", lowerCase );
const upperCase = toUpperCaseLater( lowerCase ).then( r => { log( r )} );
log( "upperCase:", upperCase );
}
*/
function asycn2UpperCase( input ){
const lowerCase = input;
log( "lowerCase:", lowerCase );
// wrap our code in a wrapper function
function sync( data ){
const upperCase = data;
log( "upperCase:", upperCase );
}
// pass wrapper function to then()
toUpperCaseLater( lowerCase ).then( r => sync( r ) );
// no code after toUpperCaseLater() function
}
asycn2UpperCase( "how are you today?" )
console.log( "---- end ----" );</code></pre>
<p>and the output is</p>
<pre><code class="language-javascript">--- start ---
lowerCase: how are you today?
---- end ----
upperCase: HOW ARE YOU TODAY?</code></pre>
<h3 class="sub-title">Good looking syntax</h3>
<p>By looking the code it is not quite obvious what it does and therefore in <strong>ES2017</strong> async-await was introduced to tackle this issue.</p>
<p>Here is the same code and the same output by using <strong>async-await</strong> wrapper.</p>
<pre><code class="language-javascript">const log = console.log.bind( console );
log( "--- start ---" );
function toUpperCaseLater( string, sync ){
return new Promise(function( resolve ){
setTimeout(function(){
resolve( string.toUpperCase() );
}, 1000);
});
}
async function asycn2UpperCase( input ){
// these two line is part of main task
// main thread
const lowerCase = input;
log( "lowerCase:", lowerCase );
// these two line is part of helper thread
// micro task
const upperCase = await toUpperCaseLater( lowerCase );
log( "upperCase:", upperCase );
}
asycn2UpperCase( "how are you today?" )
console.log( "---- end ----" );</code></pre>
<p>and the output:</p>
<pre><code class="language-javascript">--- start ---
lowerCase: how are you today?
---- end ----
upperCase: HOW ARE YOU TODAY?</code></pre>
<p>Is not it much cleaner? Yes it is and developers feel that really there is a <strong>await</strong> operation which there is not.</p>
<p class="quote">The async function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. But the syntax and structure of your code using async functions is much more like using standard synchronous functions.</p>
<ul>
<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a></li>
</ul>
<h3 class="sub-title">Multi async-await</h3>
<p>Surprisingly, we can easily use many async-await without too much confusing.</p>
<p>Here is an example for converting an array of string to uppercase.</p>
<pre><code class="language-javascript">const log = console.log.bind( console );
log( "--- start ---" );
function toUpperCaseLater( string, sync ){
return new Promise(function( resolve ){
setTimeout(function(){
resolve( string.toUpperCase() );
}, 1000);
});
}
async function asycn2UpperCase( list ){
log( `convert all ${list} to uppercase` );
const how = await toUpperCaseLater( list.shift() );
log( "list[0]:", how );
const are = await toUpperCaseLater( list.shift() );
log( "list[1]:", are );
const you = await toUpperCaseLater( list.shift() );
log( "list[2]:", you );
const today = await toUpperCaseLater( list.shift() );
log( "list[3]:", today );
}
asycn2UpperCase( [ "how", "are", "you", "today?" ] )
console.log( "---- end ----" );</code></pre>
<p>and the output</p>
<pre><code class="language-javascript">--- start ---
convert all how,are,you,today? to uppercase
---- end ----
list[0]: HOW
list[1]: ARE
list[2]: YOU
list[3]: TODAY?
</code></pre>
<h3 class="sub-title">Really async-await</h3>
<p>If we run the code above (= multi-async-await) using <strong>time</strong> Linux utility we will have:</p>
<pre><code class="language-javascript">time node async-await-2.js
--- start ---
convert all how,are,you,today? to uppercase
---- end ----
list[0]: HOW
list[1]: ARE
list[2]: YOU
list[3]: TODAY?
real 0m4.150s
user 0m0.129s
sys 0m0.022s</code></pre>
<p>Hmmm! about 4 seconds! Do we really have asynchronous code? Or just we have <strong>synchronized</strong> them? Which one?</p>
<p>It seems that for four <strong>await</strong>; we have waited 1 second for each one; so we have four ones, and we have waited totally +4 seconds.</p>
<p>In other words it seems that we run one after another or <strong>one by one</strong> and not all four await at the same time!</p>
<p>Lets investigate this more in next post.</p>
DD_MM_YYYY
<div class="edit-on-github">
<a target="_blank" href="https://github.com/k-five/jsfun.ir/blob/master/home/modern-javascript/async-await/main.html">Edit on Github</a>
</div>
</div>
</main>