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
|
---
title: Promise.prototype.then()
slug: Web/JavaScript/Reference/Global_Objects/Promise/then
tags:
- ECMAScript6
- JavaScript
- метод
translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then
---
<div>{{JSRef}}</div>
<p>Метод <code><strong>then()</strong></code> возвращает {{jsxref("Promise")}}. Метод может принимать два аргумента: колбэк-функции для случаев выполнения и отклонения промиса.</p>
<div class="note">
<p> Если один или оба аргумента отсутствуют или их значения не функции, то <code>then</code> пропустит их и не выбросит ошибку. Если для <code>Promise</code>, который переходит в состояние <code>выполнен</code> или <code>отклонён</code> вызван метод <code>then</code>, и у данного метода нет нужного обработчика, то в таком случае <code>then</code> просто возвращает промис с состоянием начального <code>Promise</code>, для которого <code>then</code> был вызван.</p>
</div>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox notranslate"><var>p.then(onFulfilled[, onRejected])</var>;
p.then(value => {
// выполнение
}, reason => {
// отклонение
});
</pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt><code>onFulfilled</code> {{optional_inline}}</dt>
<dd>{{jsxref("Function")}} вызывается, когда <code>Promise</code> выполнен. Эта функция принимает один аргумент, значение с которым промис был выполнен. Если значение onFulfilled не функция, то оно автоматически заменяется на "Identity" функцию (возвращает полученный аргумент)</dd>
<dt><code>onRejected</code> {{optional_inline}}</dt>
<dd>{{jsxref("Function")}} вызывается, когда <code>Promise</code> отклонён. Эта функция принимает один аргумент, значение с которым промис был отклонён. Если значение onRejected не функция, то оно автоматически заменяется на "Thrower" функцию (выбрасывает полученный аргумент как ошибку)</dd>
</dl>
<h2 id="Описание">Описание</h2>
<p>Так как и метод <code>then</code>, и метод {{jsxref("Promise.prototype.catch()")}} возвращают <code>Promise</code>, их можно вызвать цепочкой — эта операция называется <em>соединение</em>.</p>
<h2 id="Примеры">Примеры</h2>
<h3 id="Использование_метода_then">Использование метода <code>then</code></h3>
<pre class="brush: js notranslate">var p1 = new Promise(function(resolve, reject) {
resolve("Успех!");
// или
// reject("Ошибка!");
});
p1.then(function(value) {
console.log(value); // Успех!
}, function(reason) {
console.log(reason); // Ошибка!
});
</pre>
<h3 id="Соединение">Соединение</h3>
<p>Так как метод <code>then</code> возвращает промис (<code>Promise</code>), вы можете объединить несколько вызовов <code>then</code> в цепочку. Значения возвращаемые из колбэков onFulfilled или onRejected будут автоматически обёрнуты в промис.</p>
<pre class="brush: js notranslate">var p2 = new Promise(function(resolve, reject) {
resolve(1);
});
p2.then(function(value) {
console.log(value); // 1
return value + 1;
}).then(function(value) {
console.log(value); // 2
});
p2.then(function(value) {
console.log(value); // 1
});
</pre>
<p>Вы также можете соединить одну функцию, имеющую подобный с промисами API, с другой функцией.</p>
<pre class="brush: js notranslate">function fetch_current_data() {
// API функции fetch() возвращает промис. Эта функция
// имеет аналогичный API, за исключением значения в случае выполнения
return fetch("current-data.json").then((response) => {
if (response.headers.get("content-type") != "application/json") {
throw new TypeError();
}
var j = response.json();
// можем что-нибудь делать с j
return j; // в случае выполнения промиса, значение
// передаётся в fetch_current_data().then()
});
}
</pre>
<p>Если onFulfilled возвращает промис, возвращаемое значение может быть выполнено (resolved) / отклонено (rejected) промисом.</p>
<pre class="brush: js notranslate">function resolveLater(resolve, reject) {
setTimeout(function () {
resolve(10);
}, 1000);
}
function rejectLater(resolve, reject) {
setTimeout(function () {
reject(20);
}, 1000);
}
var p1 = Promise.resolve("foo");
var p2 = p1.then(function() {
// Возвращает промис, который будет разрешен значением 10 через 1 секунду
return new Promise(resolveLater);
});
p2.then(function(v) {
console.log("resolved", v); // "resolved", 10
}, function(e) {
// не вызвано
console.log("rejected", e);
});
var p3 = p1.then(function() {
// Возвращает промис, который будет отброшен значением 20 через 1 секунду
return new Promise(rejectLater);
});
p3.then(function(v) {
// не
console.log("resolved", v);
}, function(e) {
console.log("rejected", e); // "rejected", 20
});</pre>
<h2 id="Спецификация">Спецификация</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
<td>{{Spec2('ES6')}}</td>
<td>Изначальное определение в стандарте ECMA.</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("javascript.builtins.Promise.then")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{jsxref("Promise")}}</li>
<li>{{jsxref("Promise.prototype.catch()")}}</li>
</ul>
|
