diff options
| -rw-r--r-- | files/ja/web/javascript/reference/global_objects/promise/finally/index.md | 111 |
1 files changed, 46 insertions, 65 deletions
diff --git a/files/ja/web/javascript/reference/global_objects/promise/finally/index.md b/files/ja/web/javascript/reference/global_objects/promise/finally/index.md index 95b67a40d4..b3d2ea4eff 100644 --- a/files/ja/web/javascript/reference/global_objects/promise/finally/index.md +++ b/files/ja/web/javascript/reference/global_objects/promise/finally/index.md @@ -3,68 +3,66 @@ title: Promise.prototype.finally() slug: Web/JavaScript/Reference/Global_Objects/Promise/finally tags: - JavaScript - - Method - - Promises - - Prototype - - Reference + - メソッド + - Promise + - プロトタイプ + - リファレンス - finally + - ポリフィル +browser-compat: javascript.builtins.Promise.finally translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally --- -<div>{{JSRef}}</div> +{{JSRef}} -<p><strong><code>finally()</code></strong> メソッドは {{jsxref("Promise")}} を返します。プロミスが確立したら、満足か拒否かにかかわらず、指定されたコールバック関数が実行されます。これにより、プロミスが成功裏に実行されたか否かに関わりなく、 <code>Promise</code> が処理された後に実行されなければならないコードを提供できます。</p> +**`finally()`** メソッドは {{jsxref("Promise")}} を返します。プロミスが確立したら、満足か拒否かにかかわらず、指定されたコールバック関数が実行されます。これにより、プロミスが成功裏に実行されたか否かに関わりなく、 `Promise` が処理された後に実行されなければならないコードを提供できます。 -<p>これによって、プロミスの {{jsxref("Promise.then", "then()")}} ハンドラーと {{jsxref("Promise.catch", "catch()")}} ハンドラーでコードが重複することを避けることができます。</p> +これによって、プロミスの {{jsxref("Promise.then", "then()")}} ハンドラーと {{jsxref("Promise.catch", "catch()")}} ハンドラーでコードが重複することを避けることができます。 -<h2 id="Syntax" name="Syntax">構文</h2> +{{EmbedInteractiveExample("pages/js/promise-finally.html", "taller")}} -<pre class="syntaxbox notranslate"><var>p</var>.finally(<var>onFinally</var>); +## 構文 -<var>p</var>.finally(function() { - // 確立 (満足または拒否) +```js +p.finally(onFinally); + +p.finally(function() { + // 決定 (履行または拒否) }); -</pre> +``` + +### 引数 -<h3 id="Parameters" name="Parameters">引数</h3> +- `onFinally` + - : `Promise` が決定したら呼び出される関数 ({{jsxref("Function")}}) です。 -<dl> - <dt><code><var>onFinally</var></code></dt> - <dd><code>Promise</code> が確立したら呼び出される {{jsxref("Function")}}。</dd> -</dl> +### 返値 -<h3 id="Return_value" name="Return_value">返値</h3> +`finally` ハンドラーに指定した `onFinally` が設定された {{jsxref("Promise")}} を返します。 -<p><code>finally</code> ハンドラーに指定した <code>onFinally</code> が設定した {{jsxref("Promise")}} を返します。</p> +## 解説 -<h2 id="Description" name="Description">解説</h2> +プロミスが決定した後、結果に関わらず何らかの処理や後始末を行いたいなら、`finally()` メソッドは役立ちます。 -<p>プロミスが確立した後、結果に関わらず何らかの処理や後始末を行いたいなら、<code>finally()</code> メソッドは役立ちます。</p> +`finally()` メソッドは `.then(onFinally, onFinally)` の呼び出しとよく似ていますが、いくつかの点が異なります。 -<p><code>finally()</code> メソッドは <code>.then(onFinally, onFinally)</code> の呼び出しとよく似ていますが、いくつかの点が異なります。</p> +- 関数をインラインで作成する場合、関数を 2 度宣言するか、変数を作成するかのどちらかで、一度に渡すことができます。 +- プロミスが履行されたか拒否されたかを知る術がないため、`finally` コールバックは一切引数を受け取りません。この用途では、拒否された理由や履行された値などを提供する必要がなく、それらを気にしないときに適しています。 -<ul> - <li>関数をインラインで作成する場合、関数を 2 度宣言するか、変数を作成するかのどちらかで、一度に渡すことができます。</li> - <li>プロミスが満足したか拒否されたかを知る術がないため、<code>finally</code> コールバックは一切引数を受け取りません。このユースケースは、拒否された理由や履行された値などを提供する必要がなく、それらを<em>気にしない</em>ときに適しています。 - <ul> - <li><code>Promise.resolve(2).then(() => {}, () => {})</code> (<code>undefined</code> で解決される) と異なり、<code>Promise.resolve(2).finally(() => {})</code> は <code>2</code> で解決される。</li> - <li>同様に、<code>Promise.reject(3).then(() => {}, () => {})</code> (<code>undefined</code> で解決される) と異なり、<code>Promise.reject(3).finally(() => {})</code> は <code>3</code> で拒否される。</li> - </ul> - </li> -</ul> + - `Promise.resolve(2).then(() => {}, () => {})` (`undefined` で解決される) と異なり、`Promise.resolve(2).finally(() => {})` は `2` で解決されます。 + - 同様に、`Promise.reject(3).then(() => {}, () => {})` (`undefined` で解決される) と異なり、`Promise.reject(3).finally(() => {})` は `3` で拒否されます。 -<div class="note"> -<p><strong>補足:</strong> <code>finally</code> コールバック内で <code>throw</code> が行われた場合 (または、拒否されたプロミスを返した場合)、 <code>throw</code> を呼び出すときに指定された拒否理由と共に新しいプロミスが拒否されます。</p> -</div> +> **Note:** `finally` コールバック内で `throw` が行われた場合 (または、拒否されたプロミスを返した場合)、 `throw` を呼び出すときに指定された拒否理由と共に新しいプロミスが拒否されます。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Using_finally" name="Using_finally">finally の使用</h3> +### finally の使用 -<pre class="brush: js notranslate">let isLoading = true; +```js +let isLoading = true; fetch(myRequest).then(function(response) { var contentType = response.headers.get("content-type"); - if(contentType && contentType.includes("application/json")) { + if(contentType && contentType.includes("application/json")) { return response.json(); } throw new TypeError("Oops, we haven't got JSON!"); @@ -72,36 +70,19 @@ fetch(myRequest).then(function(response) { .then(function(json) { /* process your JSON further */ }) .catch(function(error) { console.error(error); /* this line can also throw, e.g. when console = {} */ }) .finally(function() { isLoading = false; }); +``` -</pre> - -<div class="hidden"> -<p>Please do not add polyfills on MDN pages. For more details, refer to: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> -</div> - -<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.finally', 'Promise.prototype.finally')}}</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("javascript.builtins.Promise.finally")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{jsxref("Promise")}}</li> - <li>{{jsxref("Promise.prototype.then()")}}</li> - <li>{{jsxref("Promise.prototype.catch()")}}</li> -</ul> +- `Promise.prototype.finally` のポリフィルは [`core-js`](https://github.com/zloirock/core-js#ecmascript-promise) で利用できます +- {{jsxref("Promise")}} +- {{jsxref("Promise.prototype.then()")}} +- {{jsxref("Promise.prototype.catch()")}} |