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
|
---
title: await
slug: Web/JavaScript/Reference/Operators/await
translation_of: Web/JavaScript/Reference/Operators/await
---
<div>{{jsSidebar("Operators")}}</div>
<div><code>await</code>연산자는 {{jsxref("Promise")}}를 기다리기 위해 사용됩니다. 연산자는 {{jsxref("Statements/async_function", "async function")}} 내부에서만 사용할 수 있습니다.</div>
<h2 id="구문">구문</h2>
<pre class="syntaxbox notranslate">[<em>rv</em>] = await <em>expression</em>;</pre>
<dl>
<dt><code>expression</code></dt>
<dd>{{jsxref("Promise")}} 혹은 기다릴 어떤 값입니다.</dd>
<dt><code>rv</code></dt>
<dd>
<p>{{jsxref("Promise")}}에 의해 만족되는 값이 반환됩니다. {{jsxref("Promise")}}가 아닌 경우에는 그 값 자체가 반환됩니다.</p>
</dd>
</dl>
<h2 id="설명">설명</h2>
<p><code>await</code> 문은 <code>Promise</code>가 fulfill되거나 <code>reject</code> 될 때까지 <code>async</code> 함수의 실행을 일시 정지하고, <code>Promise</code>가 fulfill되면 <code>async</code> 함수를 일시 정지한 부분부터 실행합니다. 이때 <code>await</code> 문의 반환값은 <code>Promise</code> 에서 fulfill된 값이 됩니다.</p>
<p>만약 <code>Promise</code>가 <code>reject</code>되면, <code>await</code> 문은 <code>reject</code>된 값을 <code>throw</code>합니다.</p>
<p><code>await</code> 연산자 다음에 나오는 문의 값이 <code>Promise</code>가 아니면 해당 값을 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolved Promise</a>로 변환시킵니다.</p>
<p>An <code>await</code> can split execution flow, allowing the caller of the <code>await</code>'s function to resume execution before the deferred continuation of the <code>await</code>'s function. After the <code>await</code> defers the continuation of its function, if this is the first <code>await</code> executed by the function, immediate execution also continues by returning to the function's caller a pending <code>Promise</code> for the completion of the <code>await</code>'s function and resuming execution of that caller.</p>
<h2 id="예제">예제</h2>
<p>만약 <code>Promise</code>가 <code>await</code>에 넘겨지면, <code>await</code>은 <code>Promise</code>가 fulfill되기를 기다렸다가, 해당 값을 리턴합니다.</p>
<pre class="brush: js notranslate">function resolveAfter2Seconds(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
async function f1() {
var x = await resolveAfter2Seconds(10);
console.log(x); // 10
}
f1();
</pre>
<p>{{jsxref("Global_Objects/Promise/then", "Thenable objects")}} will be fulfilled just the same.</p>
<pre class="notranslate"><code>async function f2() {
const thenable = {
then: function(resolve, _reject) {
resolve('resolved!')
}
};
console.log(await thenable); // resolved!
}
f2();</code></pre>
<p>만약 값이 <code>Promise</code>가 아니라면, 해당 값은 <code>resolve</code>된 <code>Promise</code>로 변환되며 이를 기다립니다.</p>
<pre class="brush: js notranslate">async function f2() {
var y = await 20;
console.log(y); // 20
}
f2();
</pre>
<p>만약 <code>Promise</code>가 <code>reject</code>되면, <code>reject</code>된 값이 <code>throw</code>됩니다.</p>
<pre class="brush: js notranslate">async function f3() {
try {
var z = await Promise.reject(30);
} catch(e) {
console.log(e); // 30
}
}
f3();
</pre>
<p>try블럭 없이 rejected <code>Promise</code>다루기</p>
<pre class="notranslate"><code>var response = await promisedFunction().catch((err) => { console.error(err); });
// response will be undefined if the promise is rejected</code></pre>
<h2 id="Specifications">Specifications</h2>
<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}</td>
<td>{{Spec2("ESDraft")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}}</td>
<td>{{Spec2("ES2018")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}}</td>
<td>{{Spec2("ES2017")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
<div>
<p>{{Compat("javascript.operators.await")}}</p>
</div>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>{{jsxref("Statements/async_function", "async function")}}</li>
<li>{{jsxref("Operators/async_function", "async function expression")}}</li>
<li>{{jsxref("AsyncFunction")}} object</li>
</ul>
|
