aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html
blob: 4101047db0f1ba7a32b8d446f63944ab4f3a24a9 (plain)
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
---
title: Порядок выполнения и обработка ошибок
slug: Web/JavaScript/Guide/Control_flow_and_error_handling
tags:
  - Guide
  - JavaScript
translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
---
<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</p>

<div class="summary">
<p>JavaScript поддерживает компактный набор инструкций, особенно управляющих инструкций, которые вы можете использовать, чтобы реализовать интерактивность в вашем приложении. В данной главе даётся обзор этих инструкций.</p>
</div>

<p>Более подробная информация об инструкциях, рассмотренных в данной главе, содержится в <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements">справочнике по JavaScript</a>. Точка с запятой ( <code>;</code> ) используется для разделения инструкций в коде.</p>

<p>Любое выражение (expression) в JavaScript является также инструкцией (statement). Чтобы получить более подробную информацию о выражениях, прочитайте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators">Выражения и операторы</a>.</p>

<h2 id="Инструкция_block">Инструкция block</h2>

<p>Инструкция block является фундаментальной и используется для группировки других инструкций. Блок ограничивается фигурными скобками:</p>

<pre style="font-size: 14px; white-space: normal;">{ statement_1; statement_2; ... statement_n; }</pre>

<p>Блок обычно используется с управляющими инструкциями (например, <code>if</code>, <code>for</code>, <code>while</code>).</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">while</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">&lt;</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{ </span>x<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">++</span><span class="punctuation token" style="color: #999999;">;</span><span class="punctuation token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre>

<p>В вышеприведённом примере <code>{ x++; }</code> является блоком.</p>

<p><strong>Обратите внимание:</strong> в JavaScript <strong>отсутствует</strong> область видимости блока до ECMAScript2015. Переменные, объявленные внутри блока, имеют область видимости функции (или скрипта), в которой находится данный блок, вследствие чего они сохранят свои значения при выходе за пределы блока. Другими словами, блок не создаёт новую область видимости. "Автономные" (standalone) блоки в JavaScript могут продуцировать полностью отличающийся результат, от результата в языках C или Java. Например:</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">1</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="punctuation token" style="color: #999999;">{
  </span><span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">2</span><span class="punctuation token" style="color: #999999;">;
</span><span class="punctuation token" style="color: #999999;">}</span>
console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>x<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // выведет 2</span></code></pre>

<p>В вышеприведённом примере инструкция <code>var x</code> внутри блока находится в той же области видимости, что и инструкция <code>var x</code> перед блоком. В C или Java эквивалентный код выведет значение 1.</p>

<p>Начиная с ECMAScript 6, оператор <code>let</code> позволяет объявить переменную в области видимости блока. Чтобы получить более подробную информацию, прочитайте {{jsxref("Statements/let", "let")}}.</p>

<h2 id="Условные_инструкции">Условные инструкции</h2>

<p>Условная инструкция — это набор команд, которые выполняются, если указанное условие является истинным. JavaScript поддерживает две условные инструкции: <code style="font-style: normal;">if...else</code> и <code style="font-style: normal;">switch</code>.</p>

<h3 id="Инструкция_if...else">Инструкция if...else</h3>

<p>Используйте оператор <code>if</code> для выполнения инструкции, если логическое условия истинно. Используйте опциональный <code>else</code>, для выполнения инструкции, если условие ложно. Оператор if выглядит так:</p>

<pre class="brush: js">if (condition) {
    statement_1;
} else {
    statement_2;
}</pre>

<p>  Здесь <code>condition</code> может быть любым выражением, вычисляемым как истинное (true) или ложное (false). Чтобы получить более подробную информацию о значениях <code>true </code>и <code>false</code>, прочитайте <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Boolean#Description">Boolean</a>. Если условие оценивается как<code> true</code>, то выполняется <code>statement_1</code>, в противном случае -<code> statement_2</code>. Блоки <code>statement_1 </code>и<code> statement_2</code> могут быть любыми блоками, включая также вложенные инструкции <code>if</code>.</p>

<p>Также вы можете объединить несколько инструкций, пользуясь <code>else if</code> для получения последовательности проверок условий:</p>

<pre class="syntaxbox">if (condition_1) { statement_1;} else if (condition_2) { statement_2;} else if (condition_n) { statement_n; } else { statement_last;}</pre>

<p>В случае нескольких условий только первое логическое условие, которое вычислится истинным (true), будет выполнено. Используйте блок ( <code>{ ... }</code> ) для группировки нескольких инструкций. Применение блоков является хорошей практикой, особенно когда используются вложенные инструкции <code>if</code>:</p>

<pre style="font-size: 14px; white-space: normal;">if (condition) {
  statement_1_runs_if_condition_is_true;
  statement_2_runs_if_condition_is_true;
} else {
  statement_3_runs_if_condition_is_false;
  statement_4_runs_if_condition_is_false;
}</pre>

<p>Нежелательно использовать простые присваивания в условном выражении, т.к. присваивание может быть спутано с равенством при быстром просмотре кода. Например, не используйте следующий код:</p>

<pre class="brush: js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span>
</code></pre>

<p>Если вам нужно использовать присваивание в условном выражении, то распространённой практикой является заключение операции присваивания в дополнительные скобки. Например:</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">( </span><span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre>

<h4 id="Ложные_значения">Ложные значения</h4>

<p>Следующие значения являются {{Glossary("Falsy", "ложными")}}:</p>

<ul>
 <li><code>false</code></li>
 <li><code>undefined</code></li>
 <li><code>null</code></li>
 <li><code>0</code></li>
 <li><code>NaN</code></li>
 <li>пустая строка ( <code>""</code> )</li>
</ul>

<p>Все остальные значения, включая все объекты, будут восприняты как истина при передаче в условное выражение.</p>

<p>Не путайте примитивные логические значения <code>true</code> и <code>false</code> со значениями true и false объекта {{jsxref("Boolean")}}. Например:</p>

<pre class="brush: js">var b = new Boolean(false);
if (b) // это условие true
if (b == true) // это условие false
</pre>

<p>В следующем примере функция <code>checkData</code> возвращает <code>true</code>, если число символов в объекте <code>Text</code> равно трём; в противном случае функция отображает окно alert и возвращает <code>false</code>.</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">checkData<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>document<span class="punctuation token" style="color: #999999;">.</span>form1<span class="punctuation token" style="color: #999999;">.</span>threeChar<span class="punctuation token" style="color: #999999;">.</span>value<span class="punctuation token" style="color: #999999;">.</span>length <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">==</span> <span class="number token" style="color: #990055;">3</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
    <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">else</span> <span class="punctuation token" style="color: #999999;">{</span>
    <span class="function token" style="color: #dd4a68;">alert<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Enter exactly three characters. "</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span>
    document<span class="punctuation token" style="color: #999999;">.</span>form1<span class="punctuation token" style="color: #999999;">.</span>threeChar<span class="punctuation token" style="color: #999999;">.</span>value <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">" is not valid."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">false</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="punctuation token" style="color: #999999;">}</span>
<span class="punctuation token" style="color: #999999;">}</span></code></pre>

<h3 id="Инструкция_switch">Инструкция switch</h3>

<p>Инструкция <code>switch</code> позволяет сравнить значение выражения с различными вариантами и при совпадении выполнить соответствующий код. Инструкция имеет следующий вид:</p>

<pre>switch (expression) {
   case label_1:
      statements_1
      [break;]
   case label_2:
      statements_2
      [break;]
   ...
   default:
      statements_default
      [break;]
}
</pre>

<p>Сначала производится поиск ветви <code>case</code> с меткой <code>label</code>, совпадающей со значением выражения <code>expression</code>. Если совпадение найдено, то соответствующий данной ветви код выполняется до оператора <code>break</code>, который прекращает выполнение <code>switch</code> и передаёт управление дальше. В противном случае управление передаётся необязательной ветви <code>default</code> и выполняется соответствующий ей код. Если ветвь <code>default</code> не найдена, то программа продолжит выполняться со строчки, следующей за инструкцией <code>switch</code>. По соглашению ветвь <code>default</code> является последней ветвью, но следовать этому соглашению необязательно.</p>

<p>Если оператор <code>break</code> отсутствует, то после выполнения кода, который соответствует выбранной ветви, начнётся выполнение кода, который следует за ней.</p>

<p>В следующем примере если <code>fruittype</code> имеет значение <code>"Bananas"</code>, то будет выведено сообщение<code> "Bananas are $0.48 a pound."</code> и оператор <code>break</code> прекратит выполнение <code>switch</code>. Если бы оператор <code>break</code> отсутствовал, то был бы также выполнен код, соответствующий ветви <code>"Cherries"</code>, т.е. выведено сообщение <code>"Cherries are $3.00 a pound."</code>.</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">switch</span> <span class="punctuation token" style="color: #999999;">(</span>fruittype<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Oranges"</span><span class="punctuation token" style="color: #999999;">:</span>
    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Oranges are $0.59 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Apples"</span><span class="punctuation token" style="color: #999999;">:</span>
    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Apples are $0.32 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Bananas"</span><span class="punctuation token" style="color: #999999;">:</span>
    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Bananas are $0.48 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Cherries"</span><span class="punctuation token" style="color: #999999;">:</span>
    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Cherries are $3.00 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Mangoes"</span><span class="punctuation token" style="color: #999999;">:</span>
    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Mangoes are $0.56 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Papayas"</span><span class="punctuation token" style="color: #999999;">:</span>
    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Mangoes and papayas are $2.79 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="keyword token" style="color: #0077aa;">default</span><span class="punctuation token" style="color: #999999;">:</span>
   console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Sorry, we are out of "</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> fruittype <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="punctuation token" style="color: #999999;">}</span>
console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Is there anything else you'd like?"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>

<h2 id="Инструкции_обработки_исключений">Инструкции обработки исключений</h2>

<p>Инструкция <code>throw</code> используется, чтобы выбросить исключение, а инструкция <code>try...catch</code>, чтобы его обработать.</p>

<h3 id="Типы_исключений">Типы исключений</h3>

<p>Практически любой объект может быть выброшен как исключение. Тем не менее, не все выброшенные объекты создаются равными. Обычно числа или строки выбрасываются как исключения, но часто более эффективным является использование одного из типов исключений, специально созданных для этой цели:</p>

<ul>
 <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_types">Исключения ECMAScript</a></li>
 <li>{{domxref("DOMException")}} и {{domxref("DOMError")}}</li>
</ul>

<h3 id="Инструкция_throw">Инструкция throw</h3>

<p>Используйте инструкцию <code>throw</code>, чтобы выбросить исключение. При выбросе исключения нужно указать выражение, содержащее значение, которое будет выброшено:</p>

<pre style="font-size: 14px; white-space: normal;">throw expression;</pre>

<p>Вы можете выбросить любое выражение, а не только выражения определённого типа. В следующем примере выбрасываются исключения различных типов:</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"Error2"</span><span class="punctuation token" style="color: #999999;">;</span>  <span class="comment token" style="color: #708090;">                                            // string
</span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="number token" style="color: #990055;">42</span><span class="punctuation token" style="color: #999999;">;</span>        <span class="comment token" style="color: #708090;">                                            // number
</span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">;</span>      <span class="comment token" style="color: #708090;">                                            // boolean
</span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="punctuation token" style="color: #999999;">{ </span>toString<span class="punctuation token" style="color: #999999;">:</span> <span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">return</span> <span class="string token" style="color: #669900;">"I'm an object!"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// object</span></code></pre>

<div class="note"><strong>Примечание:</strong> Вы можете выбросить объект как исключение. Вы можете обращаться к свойствам данного объекта в блоке <code>catch</code>.</div>

<p class="note">В следующем примере объект <code>UserException</code> выбрасывается как исключение:</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> UserException <span class="punctuation token" style="color: #999999;">(</span>message<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">{</span>
  <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>message <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">= </span>message<span class="punctuation token" style="color: #999999;">;</span>
  <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>name <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">= </span><span class="string token" style="color: #669900;">"UserException"</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="punctuation token" style="color: #999999;">}</span>
<span class="comment token" style="color: #708090;">
</span>UserException<span class="punctuation token" style="color: #999999;">.</span>prototype<span class="punctuation token" style="color: #999999;">.</span>toString <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">function</span> <span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>name <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">': "'</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>message <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">'"'</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="punctuation token" style="color: #999999;">}</span>
<span class="comment token" style="color: #708090;">
</span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">UserException</span><span class="punctuation token" style="color: #999999;">(</span><span class="string token" style="color: #669900;">"Value too high"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>

<h3 id="Инструкция_try...catch">Инструкция try...catch</h3>

<p>Инструкция <code>try...catch</code> состоит из блока <code>try</code>, который содержит одну или несколько инструкций, и блок <code>catch</code>, которые содержит инструкции, определяющие порядок действий при выбросе исключения в блоке <code>try</code>. Иными словами, если в блоке <code>try</code> будет выброшено исключение, то управление будет передано в блок <code>catch</code>. Если в блоке <code>try</code> не возникнет исключений, то блок <code>catch</code> будет пропущен. Блок <code>finally</code> будет выполнен после окончания работы блоков <code>try</code> и <code>catch</code>, вне зависимости от того, было ли выброшено исключение.</p>

<p>В следующем примере вызывается функция <code>getMonthName</code>, которая возвращает название месяца по его номеру. Если месяца с указанным номером не существует, то функция выбросит исключение <code>"InvalidMonthNo"</code>, которое будет перехвачено в блоке <code>catch</code>:</p>

<pre class="brush: js">function getMonthName(mo) {
  mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec)
  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
                "Aug","Sep","Oct","Nov","Dec"];
  if (months[mo]) {
    return months[mo];
  } else {
    throw "InvalidMonthNo"; //throw keyword is used here
  }
}

try { // statements to try
  monthName = getMonthName(myMonth); // function could throw exception
}
catch (e) {
  monthName = "unknown";
  logMyErrors(e); // pass exception object to error handler -&gt; your own
}

</pre>

<h4 id="The_catch_Block">Блок <code>catch</code></h4>

<p>Используйте блок <code>catch</code>, чтобы обработать исключения, сгенерированные в блоке <code>try</code>.</p>

<pre style="font-size: 14px; white-space: normal;">catch (catchID) { statements }</pre>

<p>JavaScript создаёт идентификатор <code>catchID</code>, которому присваивается перехваченное исключение, при входе в блок <code>catch</code>; данный идентификатор доступен только в пределах блока <code>catch</code> и уничтожается при выходе из него.</p>

<p>В следующем примере выбрасывается исключение, которое перехватывается в блоке <code>catch</code>:</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"myException"</span><span class="comment token" style="color: #708090;">
</span><span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token"> </span><span class="keyword token" style="color: #0077aa;">catch</span> <span class="punctuation token" style="color: #999999;">(</span><span class="class-name token">e</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{
  </span></code><code class="language-js" style="direction: ltr; white-space: pre;">console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">error<span class="punctuation token" style="color: #999999;">(</span></span>e<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">
</span><span class="punctuation token" style="color: #999999;">}</span></code></pre>

<h4 id="Блок_finally">Блок <code>finally</code></h4>

<p>Блок <code>finally</code> содержит код, который будет выполнен после окончания работы блоков <code>try</code> и <code>catch</code>, но до того, как будет выполнен код, который следует за инструкцией <code>try...catch</code>. Блок <code>finally</code> выполняется вне зависимости от того, было ли выброшено исключение. Блок <code>finally</code> выполняется даже в том случае, если исключение не перехватывается в блоке <code>catch</code>.</p>

<p>В следующем примере открывается файл, затем в блоке <code>try</code> происходит вызов функции <code>writeMyFile</code>, который может выбросить исключение. Если возникает исключение, то оно обрабатывается в блоке <code>catch</code>. В любом случае файл будет закрыт функцией <code>closeMyFile</code>, вызов которой находится в блоке <code>finally</code>.</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token" style="color: #dd4a68;">openMyFile<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="function token" style="color: #dd4a68;">writeMyFile<span class="punctuation token" style="color: #999999;">(</span></span>theData<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">
</span><span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">catch</span><span class="punctuation token" style="color: #999999;">(</span>e<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="function token" style="color: #dd4a68;">handleError<span class="punctuation token" style="color: #999999;">(</span></span>e<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">
</span><span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">finally</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="function token" style="color: #dd4a68;">closeMyFile<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">
</span><span class="punctuation token" style="color: #999999;">}</span></code></pre>

<p>Если блок <code>finally</code> возвращает значение, то данное значение становится возвращаемым значением всей связки <code>try-catch-finally</code>. Значения, возвращаемые блоками <code>try</code> и <code>catch</code>, будут проигнорированы.</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span>
    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">0</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    <span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"bogus"</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">catch</span><span class="punctuation token" style="color: #999999;">(</span>e<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">1</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">    // приостанавливается до завершения блока `finally`</span><span class="comment token" style="color: #708090;">
</span>    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">2</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // не выполняется
</span>  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">finally</span> <span class="punctuation token" style="color: #999999;">{</span>
    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">3</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">false</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">   // заменяет предыдущий `return`
</span>    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">4</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // не выполняется
</span>  <span class="punctuation token" style="color: #999999;">}</span>
 <span class="comment token" style="color: #708090;"> // `return false` выполняется сейчас
</span>  console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">5</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">  // не выполняется
</span><span class="punctuation token" style="color: #999999;">}</span>
<span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">               // отображает 0, 1, 3 и возвращает `false`</span></code></pre>

<p>Замена возвращаемых значений блоком <code>finally</code> распространяется в том числе и на исключения, которые выбрасываются или перевыбрасываются в блоке <code>catch</code>:</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span>
    <span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"bogus"</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">catch</span><span class="punctuation token" style="color: #999999;">(</span>e<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'caught inner "bogus"'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    <span class="keyword token" style="color: #0077aa;">throw</span> e<span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">      // приостанавливается до завершения блока `finally`</span><span class="comment token" style="color: #708090;">
</span>  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">finally</span> <span class="punctuation token" style="color: #999999;">{</span>
    <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">false</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // заменяет предыдущий `throw`
</span>  <span class="punctuation token" style="color: #999999;">}</span>
 <span class="comment token" style="color: #708090;"> // `return false` выполняется сейчас
</span><span class="punctuation token" style="color: #999999;">}</span>

<span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">catch</span><span class="punctuation token" style="color: #999999;">(</span>e<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
 <span class="comment token" style="color: #708090;"> // Не выполняется, т.к. `throw` в `catch `заменяется на `return` в `finally`</span><span class="comment token" style="color: #708090;">
</span>  console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'caught outer "bogus"'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="punctuation token" style="color: #999999;">}</span>
<span class="comment token" style="color: #708090;">
// В результате отображается сообщение </span><span class="comment token" style="color: #708090;">caught inner "bogus"
// и возвращается значение `false`</span></code></pre>

<h4 id="Nesting_try...catch_Statements">Вложенные инструкции <code>try...catch</code></h4>

<p>Вы можете вкладывать инструкции <code>try...catch</code> друг в друга. Если внутренняя инструкция <code>try...catch</code> не имеет блока <code>catch</code>, то она должна иметь блок finally, кроме того исключение будет перехвачено во внешнем блоке <code>catch</code>. Для получения большей информации ознакомьтесь с вложенными <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#Nested_try-blocks">try-блоками</a>.</p>

<h3 id="Использование_объекта_Error">Использование объекта Error</h3>

<p>В зависимости от типа ошибки вы можете использовать свойства <code>name</code> и <code>message</code>, чтобы получить более подробную информацию. Свойство <code>name</code> содержит название ошибки (например, <code>DOMException</code> или <code>Error</code>), свойство <code>message</code> — описание ошибки.</p>

<p>Если вы выбрасываете собственные исключения, то чтобы получить преимущество, которое предоставляют эти свойства (например, если ваш блок <code>catch</code> не делает различий между вашими исключениями и системными), используйте конструктор <code>Error</code>. Например:</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> doSomethingErrorProne <span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">( </span><span class="function token" style="color: #dd4a68;">ourCodeMakesAMistake<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
    <span class="keyword token" style="color: #0077aa;">throw</span> <span class="punctuation token" style="color: #999999;">( </span><span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">Error</span><span class="punctuation token" style="color: #999999;">(</span><span class="string token" style="color: #669900;">'The message'</span><span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">else</span> <span class="punctuation token" style="color: #999999;">{</span>
    <span class="function token" style="color: #dd4a68;">doSomethingToGetAJavascriptError<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="punctuation token" style="color: #999999;">}</span>
<span class="punctuation token" style="color: #999999;">}
</span>
<span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="function token" style="color: #dd4a68;">doSomethingErrorProne<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token"> </span><span class="keyword token" style="color: #0077aa;">catch</span> <span class="punctuation token" style="color: #999999;">(</span><span class="class-name token">e</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
  console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>e<span class="punctuation token" style="color: #999999;">.</span>name<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">    // 'Error'
</span>  console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>e<span class="punctuation token" style="color: #999999;">.</span>message<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // 'The message' или JavaScript error message
</span><span class="punctuation token" style="color: #999999;">}</span></code></pre>

<h2 id="Объект_Promise">Объект Promise</h2>

<p>Начиная с ECMAScript2015, JavaScript поддерживает объект {{jsxref("Promise")}}, который используется для отложенных и асинхронных операций.</p>

<p>Объект <code>Promise</code> может находиться в следующих состояниях:</p>

<ul>
 <li><em>ожидание (pending)</em>: начальное состояние, не выполнено и не отклонено.</li>
 <li><em>выполнено (fulfilled)</em>: операция завершена успешно.</li>
 <li><em>отклонено (rejected)</em>: операция завершена с ошибкой.</li>
 <li><em>заданный (settled)</em>: промис выполнен или отклонен, но не находится в состоянии ожидания.</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>

<h3 id="Загрузка_изображения_при_помощи_XHR">Загрузка изображения при помощи XHR</h3>

<p>Простой пример использования объектов <code>Promise</code> и <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> для загрузки изображения доступен в репозитории MDN <a href="https://github.com/mdn/js-examples/tree/master/promises-test">promise-test</a> на GitHub. Вы также можете <a href="https://mdn.github.io/js-examples/promises-test/">посмотреть его в действии</a>. Каждый шаг прокомментирован, что позволяет вам разобраться в архитектуре <code>Promise</code> и XHR. Здесь приводится версия без комментариев:</p>

<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">imgLoad<span class="punctuation token" style="color: #999999;">(</span></span>url<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
  <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">Promise</span><span class="punctuation token" style="color: #999999;">(</span><span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span>resolve<span class="punctuation token" style="color: #999999;">,</span> reject<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
    <span class="keyword token" style="color: #0077aa;">var</span> request <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">XMLHttpRequest</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    request<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">open<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'GET'</span><span class="punctuation token" style="color: #999999;">,</span> url<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    request<span class="punctuation token" style="color: #999999;">.</span>responseType <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">'blob'</span><span class="punctuation token" style="color: #999999;">;</span>
    request<span class="punctuation token" style="color: #999999;">.</span>onload <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
      <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>request<span class="punctuation token" style="color: #999999;">.</span>status <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">===</span> <span class="number token" style="color: #990055;">200</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
        <span class="function token" style="color: #dd4a68;">resolve<span class="punctuation token" style="color: #999999;">(</span></span>request<span class="punctuation token" style="color: #999999;">.</span>response<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
      <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">else</span> <span class="punctuation token" style="color: #999999;">{</span>
        <span class="function token" style="color: #dd4a68;">reject<span class="punctuation token" style="color: #999999;">(</span></span><span class="function token" style="color: #dd4a68;">Error<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'Image didn\'t load successfully; error code:'</span>
                     <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> request<span class="punctuation token" style="color: #999999;">.</span>statusText<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
      <span class="punctuation token" style="color: #999999;">}</span>
    <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
    request<span class="punctuation token" style="color: #999999;">.</span>onerror <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
      <span class="function token" style="color: #dd4a68;">reject<span class="punctuation token" style="color: #999999;">(</span></span><span class="function token" style="color: #dd4a68;">Error<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'There was a network error.'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
    <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
    request<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">send<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
  <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="punctuation token" style="color: #999999;">}</span></code></pre>

<p>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</p>