diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-23 21:10:34 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-30 10:36:46 +0900 |
commit | c985e56708a572f4bf93c497a56d27d622476681 (patch) | |
tree | d2336381e4790193397e75fac91b6959072db489 | |
parent | 1aad5aecf52b59565b4e9fc9688ab5d578013c66 (diff) | |
download | translated-content-c985e56708a572f4bf93c497a56d27d622476681.tar.gz translated-content-c985e56708a572f4bf93c497a56d27d622476681.tar.bz2 translated-content-c985e56708a572f4bf93c497a56d27d622476681.zip |
2021/07/21 時点の英語版に同期
-rw-r--r-- | files/ja/web/javascript/reference/global_objects/promise/catch/index.md | 136 |
1 files changed, 62 insertions, 74 deletions
diff --git a/files/ja/web/javascript/reference/global_objects/promise/catch/index.md b/files/ja/web/javascript/reference/global_objects/promise/catch/index.md index de96865a6e..6bebba303e 100644 --- a/files/ja/web/javascript/reference/global_objects/promise/catch/index.md +++ b/files/ja/web/javascript/reference/global_objects/promise/catch/index.md @@ -4,85 +4,82 @@ slug: Web/JavaScript/Reference/Global_Objects/Promise/catch tags: - ECMAScript 2015 - JavaScript - - Method + - メソッド - Promise - - Prototype + - プロトタイプ +browser-compat: javascript.builtins.Promise.catch translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch --- -<div>{{JSRef}}</div> +{{JSRef}} -<p><code><strong>catch()</strong></code> メソッドは <code>Promise</code> を返しますが、拒否された場合のみ扱います。 {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} の呼び出しと同じ動作をします (実際、 <code>obj.catch(onRejected)</code> の呼び出しは内部的に <code>obj.then(undefined, onRejected)</code> を呼び出しています)。つまり、返値を <code>undefined</code> にフォールバックしたい場合でも、 <code>onRejected</code> 関数を提供する必要があります。 - 例えば、 <code>obj.catch(() => {})</code> のようにします。</p> +**`catch()`** メソッドは {{jsxref("Promise")}} を返しますが、拒否された場合のみ扱います。 {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} の呼び出しと同じ動作をします(実際、 `obj.catch(onRejected)` の呼び出しは内部的に `obj.then(undefined, onRejected)` を呼び出しています)。つまり、返値を `undefined` に代替させたい場合でも、 `onRejected` 関数を提供する必要があります。 - 例えば、 `obj.catch(() => {})` のようにします。 -<div>{{EmbedInteractiveExample("pages/js/promise-catch.html")}}</div> +{{EmbedInteractiveExample("pages/js/promise-catch.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +```js +p.catch(onRejected); -<pre class="syntaxbox notranslate"><var>p</var>.catch(<var>onRejected</var>); - -p.catch(function(<var>reason</var>) { - // rejection +p.catch(function(reason) { + // 拒否 }); -</pre> +``` + +### 引数 + +- `onRejected` -<h3 id="Parameters" name="Parameters">引数</h3> + - : `Promise` が失敗した時に呼び出される {{jsxref("Function")}} です。この関数は一つの引数を持ちます。 -<dl> - <dt><code><var>onRejected</var></code></dt> - <dd><code>Promise</code> が失敗した時に呼び出される {{jsxref("Function")}} です。この関数は一つの引数を持ちます。 - <dl> - <dt><code><var>reason</var></code></dt> - <dd>拒否された理由です。</dd> - </dl> - <code>catch()</code> で返される Promise は、 <code><var>onRejected</var></code> がエラーを発生させた場合、または返される Promise それ自体が拒否された場合は、拒否となります。それ以外の場合は、解決となります。</dd> -</dl> + - `reason` + - : 拒否された理由です。 -<h3 id="Return_value" name="Return_value">返値</h3> + `catch()` で返される Promise は、 `onRejected` がエラーを発生させた場合、または返される Promise それ自体が拒否された場合は、拒否となります。それ以外の場合は、解決となります。 -<p>内部的には、呼び出されたオブジェクトの <code>Promise.prototype.then</code> を呼び出し、引数に <code>undefined</code> と、受け取った <code><var>onRejected</var></code> ハンドラーを渡します。返値はこの呼び出しの値であり、すなわち {{jsxref("Promise")}} です。</p> +### 返値 -<div class="warning"> -<p>なお、以下の例は <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a> のインスタンスを投げます。これは文字列を投げる場合と比較して、良い習慣と見なされています。そうでなければ、キャッチを実行する部分で引数が string か error かをチェックする必要があり、スタックトレースのような価値のある情報を失う可能性があります。</p> -</div> +内部的には、呼び出されたオブジェクトの `Promise.prototype.then` を呼び出し、引数に `undefined` と、受け取った `onRejected` ハンドラーを渡します。返値はこの呼び出しの値であり、すなわち {{jsxref("Promise")}} です。 -<p><strong>内部呼び出しの例</strong></p> +> **Warning:** なお、以下の例は [Error](/ja/docs/Web/JavaScript/Reference/Global_Objects/Error) のインスタンスを投げています。これは文字列を投げる場合と比較して、良い習慣と見なされています。そうでなければ、捕捉する部分で引数が文字列かエラーかをチェックする必要があり、スタックトレースなどの価値のある情報を失う可能性があります。 -<pre class="brush: js notranslate">// overriding original Promise.prototype.then/catch just to add some logs +**内部呼び出しの例** + +```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); + console.log('> > > > > > called .then on %o with arguments: %o', this, arguments); return originalThen.apply(this, arguments); }; Promise.prototype.catch = function(){ - console.error('> > > > > > called .catch on %o with arguments: %o', this, arguments); + console.error('> > > > > > 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> +// > > > > > > called .catch on Promise{} with arguments: Arguments{1} [0: function XXX()] +// > > > > > > called .then on Promise{} with arguments: Arguments{2} [0: undefined, 1: function XXX()] +``` -<h2 id="Description" name="Description">解説</h2> +## 解説 -<p><code>catch</code> メソッドは複合したプロミスの複合のエラー処理に使用されます。これは {{jsxref("Promise")}} を返しますので、姉妹メソッドである {{jsxref("Promise.then", "then()")}} と同様の方法で<a href="/ja/docs/Web/JavaScript/Guide/Using_promises#Chaining_after_a_catch">チェーン可能</a>です。</p> +`catch` メソッドは複合したプロミスの複合のエラー処理に使用されます。これは {{jsxref("Promise")}} を返しますので、姉妹メソッドである {{jsxref("Promise.then", "then()")}} と同様の方法で[連鎖が可能](/ja/docs/Web/JavaScript/Guide/Using_promises#chaining_after_a_catch)です。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Using_and_chaining_the_catch_method" name="Using_and_chaining_the_catch_method">catch メソッドの使用とチェーン化</h3> +### catch メソッドの使用とチェーン化 -<pre class="brush: js notranslate">var p1 = new Promise(function(resolve, reject) { +```js +var p1 = new Promise(function(resolve, reject) { resolve('Success'); }); @@ -108,11 +105,12 @@ p1.then(function(value) { }, function () { console.log('Not fired due to the catch'); }); -</pre> +``` -<h3 id="Gotchas_when_throwing_errors" name="Gotchas_when_throwing_errors">エラーを投げたことを知る</h3> +### エラーが発生したことを知る -<pre class="brush: js notranslate">// Throwing an error will call the catch method most of the time +```js +// エラーが発生すると、ほとんどの場合、 catch メソッドが呼び出される var p1 = new Promise(function(resolve, reject) { throw new Error('Uh-oh!'); }); @@ -121,7 +119,7 @@ p1.catch(function(e) { console.error(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!'); @@ -129,60 +127,50 @@ var p2 = new Promise(function(resolve, reject) { }); p2.catch(function(e) { - console.error(e); // This is never called + console.error(e); // これは呼び出されない }); -// Errors thrown after resolve is called will be silenced +// resolve が呼び出された後に発生したエラーは消える var p3 = new Promise(function(resolve, reject) { resolve(); throw new Error('Silenced Exception!'); }); p3.catch(function(e) { - console.error(e); // This is never called -});</pre> + console.error(e); // これは呼び出されない +}); +``` -<h3 id="If_it_is_resolved" name="If_it_is_resolved">解決される場合</h3> +### 解決される場合 -<pre class="brush: js notranslate">//Create a promise which would not call onReject +```js +// onReject を呼び出さないプロミスを作る var p1 = Promise.resolve("calling next"); var p2 = p1.catch(function (reason) { - //This is never called + // これは呼び出されない console.error("catch p1!"); console.error(reason); }); p2.then(function (value) { - console.log("next promise's onFulfilled"); /* next promise's onFulfilled */ + console.log("next promise's onFulfilled"); /* 次のプロミスの onFulfilled */ console.log(value); /* calling next */ }, function (reason) { console.log("next promise's onRejected"); console.log(reason); -});</pre> +}); +``` -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("javascript.builtins.Promise.catch")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{jsxref("Promise")}}</li> - <li>{{jsxref("Promise.prototype.then()")}}</li> -</ul> +- {{jsxref("Promise")}} +- {{jsxref("Promise.prototype.then()")}} |