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
|
---
title: Promise.prototype.catch()
slug: Web/JavaScript/Reference/Global_Objects/Promise/catch
tags:
- JavaScript
- Promise
- Prototype
- fonksiyon
- metod
translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch
---
<div>{{JSRef}}</div>
<p>The <strong>catch()</strong> method returns a <code>Promise</code> and deals with rejected cases only. It behaves the same as calling {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} (in fact, calling <code>obj.catch(onRejected)</code> internally calls <code>obj.then(undefined, onRejected)</code>). This means, that you have to provide <code>onRejected</code> function even if you want to fallback to <code>undefined</code> result value - for example <code>obj.catch(() => {})</code>.</p>
<div>{{EmbedInteractiveExample("pages/js/promise-catch.html")}}</div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
<h2 id="Sözdizimi">Sözdizimi</h2>
<pre class="syntaxbox"><var>p.catch(onRejected)</var>;
p.catch(function(reason) {
// rejection
});
</pre>
<h3 id="Parametreler">Parametreler</h3>
<dl>
<dt>onRejected</dt>
<dd>A {{jsxref("Function")}} called when the <code>Promise</code> is rejected. This function has one argument:
<dl>
<dt><code>reason</code></dt>
<dd>The rejection reason.</dd>
</dl>
The Promise returned by <code>catch()</code> is rejected if <code>onRejected</code> throws an error or returns a Promise which is itself rejected; otherwise, it is resolved.</dd>
</dl>
<h3 id="Dönen_değer">Dönen değer</h3>
<p>Internally calls <code>Promise.prototype.then</code> on the object upon which is called, passing the parameters <code>undefined</code> and the <code>onRejected</code> handler received; then returns the value of that call (which is a {{jsxref("Promise")}}).</p>
<div class="warning">
<p>Note the examples below are throwing instances of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a>. This is considered good practice in contrast to throwing Strings: Otherwise the part doing the catching would have to make checks to see if the argument was a string or an error, and you might lose valuable information like stack traces.</p>
</div>
<p><strong>Demonstration of the internal call:</strong></p>
<pre class="brush: js">// overriding original Promise.prototype.then/catch just to add some logs
(function(Promise){
var originalThen = Promise.prototype.then;
var originalCatch = Promise.prototype.catch;
Promise.prototype.then = function(){
console.log('> > > > > > called .then on %o with arguments: %o', this, arguments);
return originalThen.apply(this, arguments);
};
Promise.prototype.catch = function(){
console.log('> > > > > > called .catch on %o with arguments: %o', this, arguments);
return originalCatch.apply(this, arguments);
};
})(this.Promise);
// calling catch on an already resolved promise
Promise.resolve().catch(function XXX(){});
// logs:
// > > > > > > called .catch on Promise{} with arguments: Arguments{1} [0: function XXX()]
// > > > > > > called .then on Promise{} with arguments: Arguments{2} [0: undefined, 1: function XXX()]
</pre>
<h2 id="Açıklama">Açıklama</h2>
<p>The <code>catch</code> method can be useful for error handling in your promise composition.</p>
<h2 id="Örnekler">Örnekler</h2>
<h3 id="Using_and_chaining_the_catch_method">Using and chaining the <code>catch</code> method</h3>
<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
resolve('Success');
});
p1.then(function(value) {
console.log(value); // "Success!"
throw new Error('oh, no!');
}).catch(function(e) {
console.log(e.message); // "oh, no!"
}).then(function(){
console.log('after a catch the chain is restored');
}, function () {
console.log('Not fired due to the catch');
});
// The following behaves the same as above
p1.then(function(value) {
console.log(value); // "Success!"
return Promise.reject('oh, no!');
}).catch(function(e) {
console.log(e); // "oh, no!"
}).then(function(){
console.log('after a catch the chain is restored');
}, function () {
console.log('Not fired due to the catch');
});
</pre>
<h3 id="Gotchas_when_throwing_errors">Gotchas when throwing errors</h3>
<pre class="brush: js">// Throwing an error will call the catch method most of the time
var p1 = new Promise(function(resolve, reject) {
throw new Error('Uh-oh!');
});
p1.catch(function(e) {
console.log(e); // "Uh-oh!"
});
// Errors thrown inside asynchronous functions will act like uncaught errors
var p2 = new Promise(function(resolve, reject) {
setTimeout(function() {
throw new Error('Uncaught Exception!');
}, 1000);
});
p2.catch(function(e) {
console.log(e); // This is never called
});
// Errors thrown after resolve is called will be silenced
var p3 = new Promise(function(resolve, reject) {
resolve();
throw new Error('Silenced Exception!');
});
p3.catch(function(e) {
console.log(e); // This is never called
});</pre>
<h3 id="If_it_is_resolved">If it is resolved</h3>
<pre class="brush: js">//Create a promise which would not call onReject
var p1 = Promise.resolve("calling next");
var p2 = p1.catch(function (reason) {
//This is never called
console.log("catch p1!");
console.log(reason);
});
p2.then(function (value) {
console.log("next promise's onFulfilled"); /* next promise's onFulfilled */
console.log(value); /* calling next */
}, function (reason) {
console.log("next promise's onRejected");
console.log(reason);
});</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initial definition in an ECMA standard.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2>
<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
<p>{{Compat("javascript.builtins.Promise.catch")}}</p>
<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2>
<ul>
<li>{{jsxref("Promise")}}</li>
<li>{{jsxref("Promise.prototype.then()")}}</li>
</ul>
|