From 884523e85b165fef35af89dd4ee3fd494f1fe9b5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jan 2022 22:06:39 +0900 Subject: 2021/07/21 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reference/global_objects/promise/then/index.md | 213 ++++++++++----------- 1 file changed, 104 insertions(+), 109 deletions(-) (limited to 'files') diff --git a/files/ja/web/javascript/reference/global_objects/promise/then/index.md b/files/ja/web/javascript/reference/global_objects/promise/then/index.md index 8fef7186d4..2315a76285 100644 --- a/files/ja/web/javascript/reference/global_objects/promise/then/index.md +++ b/files/ja/web/javascript/reference/global_objects/promise/then/index.md @@ -4,63 +4,58 @@ slug: Web/JavaScript/Reference/Global_Objects/Promise/then tags: - ECMAScript 2015 - JavaScript - - Method + - メソッド - Promise - - Prototype + - プロトタイプ +browser-compat: javascript.builtins.Promise.then translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then --- -
{{JSRef}}
+{{JSRef}} -

then() メソッドは {{jsxref("Promise")}} を返します。最大2つの引数、 Promise が成功した場合と失敗した場合のコールバック関数を取ります。

+**`then()`** メソッドは {{jsxref("Promise")}} を返します。最大 2 つの引数として、 `Promise` が成功した場合と失敗した場合のコールバック関数を取ります。 -
{{EmbedInteractiveExample("pages/js/promise-then.html")}}
+{{EmbedInteractiveExample("pages/js/promise-then.html")}} - +> **Note:** 片方または両方の引数が省略されたり、関数ではないものが渡されたりした場合、 `then` にはハンドラーが不足しますが、エラーは発生しません。 `Promise` が状態 (履行 (`fulfillment`) または拒否 (`rejection`)) を受け入れるに当たって `then` が呼び出された際に、 `then` がハンドラーを持たない場合は、 `then` が呼び出された元の `Promise` の最後の状態を受け入れた、追加のハンドラーのない新しい `Promise` が生成されます。 -
-

片方または両方の引数が省略されたり、関数ではないものが渡されたりした場合、 then にはハンドラーが不足しますが、エラーは発生しません。 Promise が状態 (fulfillment (完了) または rejection (拒否)) を受け入れるに当たって then が呼び出された際に、 then がハンドラーを持たない場合は、 then が呼び出された元の Promise の最後の状態を受け入れた、追加のハンドラーのない新しい Promise が生成されます。

-
+## 構文 -

構文

+```js +p.then(onFulfilled[, onRejected]); -
p.then(onFulfilled[, onRejected]);
-
-p.then(value => {
-  // fulfillment
-}, reason => {
-  // rejection
+p.then(value => {
+  // 履行
+}, reason => {
+  // 拒否
 });
-
+``` -

引数

+### 引数 -
-
onFulfilled {{optional_inline}}
-
Promise が成功したときに呼び出される {{jsxref("Function")}} です。この関数は1つの引数、 fulfillment value を持ちます。これが関数ではない場合は、内部的に "Identity" 関数 (受け取った引数を返す関数) に置き換えられます。
-
onRejected {{optional_inline}}
-
Promise が拒否されたときに呼び出される {{jsxref("Function")}} です。この関数は1つの引数、 rejection reason を持ちます。これが関数ではない場合は、内部的に "Thrower" 関数 (引数として受け取ったエラーを投げる関数) に置き換えられます。
-
+- `onFulfilled` {{optional_inline}} + - : `Promise` が成功したときに呼び出される関数 ({{jsxref("Function")}}) です。この関数は 1 つの引数、 `fulfillment value` を持ちます。これが関数ではない場合は、内部的に "Identity" 関数 (受け取った引数を返す関数) に置き換えられます。 +- `onRejected` {{optional_inline}} + - : `Promise` が拒否されたときに呼び出される関数 ({{jsxref("Function")}}) です。この関数は 1 つの引数、 `rejection reason` を持ちます。これが関数ではない場合は、内部的に "Thrower" 関数 (引数として受け取ったエラーを投げる関数) に置き換えられます。 -

返値

+### 返値 -

{{jsxref("Promise")}} が完了するか拒否されると、それぞれのハンドラー関数 (onFulfilled または onRejected) が非同期に呼び出されます (現在のスレッドループにスケジュールされます)。ハンドラー関数のこの動作は特定の一連の規則に従います。もしハンドラー関数が・・・

+{{jsxref("Promise")}} が履行されるか拒否されると、それぞれのハンドラー関数 (`onFulfilled` または `onRejected`) が**非同期に**呼び出されます (現在のスレッドループにスケジュールされます)。ハンドラー関数のこの動作は特定の一連の規則に従います。もしハンドラー関数が・・・ - +- 値を返した場合、 `then` によって返されるプロミスは返値をその値として解決します。 +- 何も返さなかった場合、 `then` によって返されるプロミスは `undefined` の値で解決します。 +- エラーを投げた場合、 `then` によって返されるプロミスは、その値としてエラーを投げて拒否されます。 +- すでに履行されたプロミスを返した場合、 `then` によって返されるプロミスは、そのプロミスの値をその値として返します。 +- すでに拒否されたプロミスを返した場合、 `then` によって返されるプロミスは、そのプロミスの値をその値として拒否されます。 +- 他の**待機**状態のプロミスオブジェクトを返した場合、 `then` によって返されたプロミスの解決/拒否は、ハンドラーによって返されたプロミスの解決/拒否結果に依存します。また、 `then` によって返されたプロミスの解決値は、ハンドラーによって返されたプロミスの解決値と同じになります。 -

以下は、 then メソッドの非同期性を示す例です。

+以下は、 `then` メソッドの非同期性を示す例です。 -
// using a resolved promise, the 'then' block will be triggered instantly,
+```js
+// using a resolved promise, the 'then' block will be triggered instantly,
 // but its handlers will be triggered asynchronously as demonstrated by the console.logs
 const resolvedProm = Promise.resolve(33);
 
-let thenProm = resolvedProm.then(value => {
+let thenProm = resolvedProm.then(value => {
     console.log("this gets called after the end of the main stack. the value received and returned is: " + value);
     return value;
 });
@@ -68,44 +63,46 @@ let thenProm = resolvedProm.then(value => {
 console.log(thenProm);
 
 // using setTimeout we can postpone the execution of a function to the moment the stack is empty
-setTimeout(() => {
+setTimeout(() => {
     console.log(thenProm);
 });
 
-
-// logs, in order:
+// ログ（この順で）
 // Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
 // "this gets called after the end of the main stack. the value received and returned is: 33"
-// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33}
+// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33} +``` -

説明

+## 解説 -

then メソッドや {{jsxref("Promise.prototype.catch()")}} メソッドは Promise を返すので、チェーン可能です。 — これは composition と呼ばれる操作です。

+`then` メソッドや {{jsxref("Promise.prototype.catch()")}} メソッドはプロミスを返すので、[連鎖可能](/ja/docs/Web/JavaScript/Guide/Using_promises#chaining)です。 — これは*合成*と呼ばれる操作です。 -

例

+## 例 -

then メソッドの使用

+### `then` メソッドの使用 -
var p1 = new Promise((resolve, reject) => {
+```js
+var p1 = new Promise((resolve, reject) => {
   resolve('Success!');
   // or
   // reject(new Error("Error!"));
 });
 
-p1.then(value => {
+p1.then(value => {
   console.log(value); // Success!
-}, reason => {
+}, reason => {
   console.error(reason); // Error!
-} );
-
+}); +``` -

チェーン

+### 連鎖 -

then メソッドは Promise を返すので、メソッドチェーンができます。

+`then` メソッドは `Promise` を返すので、メソッド連鎖ができます。 -

関数が then にハンドラーとして渡されると Promise を返します。同じ Promise がメソッドチェーンの次の then に現れます。次のスニペットは、非同期実行をシミュレートする、 setTimeout() 関数付きのコードです。

+関数が `then` にハンドラーとして渡されると `Promise` を返します。同じ `Promise` がメソッド連鎖の次の `then` に現れます。次のスニペットは、非同期実行をシミュレートする、 `setTimeout()` 関数付きのコードです。 -
Promise.resolve('foo')
+```js
+Promise.resolve('foo')
   // 1. Receive "foo", concatenate "bar" to it, and resolve that to the next then
   .then(function(string) {
     return new Promise(function(resolve, reject) {
@@ -141,11 +138,13 @@ p1.then(value => {
 // logs, in order:
 // Last Then: oops... didn't bother to instantiate and return a promise in the prior then so the sequence may be a bit surprising
 // foobar
-// foobarbaz
+// foobarbaz +``` -

then() の引数として渡された関数(ハンドラ)が値を返した場合は、 Promise.resolve (<ハンドラーが呼ばれて返された値>) によって、返値を自動的に Promise でラップします。

+`then` ハンドラー内から値が返された場合は、 `Promise.resolve (<ハンドラーが呼ばれて返された値>)` が返されます。 -
var p2 = new Promise(function(resolve, reject) {
+```js
+var p2 = new Promise(function(resolve, reject) {
   resolve(1);
 });
 
@@ -159,49 +158,56 @@ p2.then(function(value) {
 p2.then(function(value) {
   console.log(value); // 1
 });
-
+``` -

then の引数として渡した関数が拒否された Promise を返した場合や、例外 (エラー) が発生した場合は、拒否された Promise を返します。

+`then` の引数として渡した関数が拒否されたプロミスを返した場合や、例外 (エラー) が発生した場合は、拒否されたプロミスを返します。 -
Promise.resolve()
-  .then(() => {
+```js
+Promise.resolve()
+  .then(() => {
     // Makes .then() return a rejected promise
     throw new Error('Oh no!');
   })
-  .then(() => {
+  .then(() => {
     console.log('Not called.');
-  }, error => {
+  }, error => {
     console.error('onRejected function called: ' + error.message);
-  });
+ }); +``` -

その他の場合はすべて、解決中 (resolving) の Promise が返されます。次の例では、チェーン上の以前の Promise が拒否されていても、最初の then() は解決中の Promise に含まれた 42 を返します。

+その他の場合はすべて、解決中 (resolving) のプロミスが返されます。次の例では、連鎖上の以前のプロミスが拒否されていても、最初の `then()` は解決中のプロミスに含まれた `42` を返します。 -
Promise.reject()
-  .then(() => 99, () => 42) // onRejected returns 42 which is wrapped in a resolving Promise
-  .then(solution => console.log('Resolved with ' + solution)); // Resolved with 42
+```js +Promise.reject() + .then(() => 99, () => 42) // onRejected returns 42 which is wrapped in a resolving Promise + .then(solution => console.log('Resolved with ' + solution)); // Resolved with 42 +``` -

多くの場合、 catch を使って失敗状態の Promise を補足する方が、 then の 2 つのハンドラーを使って処理するよりも現実的です。下記の例を見てください。

+多くの場合、 `catch` を使って失敗状態のプロミスを補足する方が、 `then` の 2 つのハンドラーを使って処理するよりも現実的です。下記の例を見てください。 -
Promise.resolve()
-  .then(() => {
+```js
+Promise.resolve()
+  .then(() => {
     // Makes .then() return a rejected promise
     throw new Error('Oh no!');
   })
-  .catch(error => {
+  .catch(error => {
     console.error('onRejected function called: ' + error.message);
   })
-  .then(() => {
+  .then(() => {
     console.log("I am always called even if the prior then's promise rejects");
-  });
+ }); +``` -

Promise ベースの API を持った関数同士であれば、別の関数上に他の関数を実装することでチェーンを使うこともできます。

+Promise ベースの API を持った関数同士であれば、別の関数上に他の関数を実装することで連鎖を使うこともできます。 -
function fetch_current_data() {
-  // The fetch() API returns a Promise.  This function
+```js
+function fetch_current_data() {
+  // The fetch() API returns a Promise.  This function
   // exposes a similar API, except the fulfillment
   // value of this function's Promise has had more
   // work done on it.
-  return fetch('current-data.json').then(response => {
+  return fetch('current-data.json').then(response => {
     if (response.headers.get('content-type') != 'application/json') {
       throw new TypeError();
     }
@@ -211,11 +217,12 @@ p2.then(function(value) {
               // fetch_current_data().then()
   });
 }
-
+``` -

onFulfilled がプロミスを返した場合、 then の返値はプロミスによって解決／拒否されます。

+`onFulfilled` がプロミスを返した場合、 `then` の返値はプロミスによって解決／拒否されます。 -
function resolveLater(resolve, reject) {
+```js
+function resolveLater(resolve, reject) {
   setTimeout(function() {
     resolve(10);
   }, 1000);
@@ -248,18 +255,19 @@ p3.then(function(v) {
 }, function(e) {
   console.error('rejected', e); // "rejected", 'Error'
 });
-
+``` -

window.setImmediate 形式のプロミスベースの代替処理

+### window\.setImmediate 形式のプロミスベースの代替処理 -

{{jsxref("Function.prototype.bind()")}} を使用して、 Reflect.apply ({{jsxref("Reflect.apply()")}}) メソッドは (キャンセルできない) {{domxref("window.setImmediate")}} 形式の関数を作成することができます。

+{{jsxref("Function.prototype.bind()")}} を使用して、 `Reflect.apply` ({{jsxref("Reflect.apply()")}}) メソッドは (キャンセルできない) {{domxref("window.setImmediate")}} 形式の関数を作成することができます。 -
const nextTick = (() => {
-  const noop = () => {}; // literally
-  const nextTickPromise = () => Promise.resolve().then(noop);
+```js
+const nextTick = (() => {
+  const noop = () => {}; // literally
+  const nextTickPromise = () => Promise.resolve().then(noop);
 
   const rfab = Reflect.apply.bind; // (thisArg, fn, thisArg, [...args])
-  const nextTick = (fn, ...args) => (
+  const nextTick = (fn, ...args) => (
     fn !== undefined
     ? Promise.resolve(args).then(rfab(null, fn, null))
     : nextTickPromise(),
@@ -269,30 +277,17 @@ p3.then(function(v) {
 
   return nextTick;
 })();
-
+``` -

仕様書

+## 仕様書 - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("javascript.builtins.Promise.then")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- {{jsxref("Promise")}} +- {{jsxref("Promise.prototype.catch()")}} -- cgit v1.2.3-54-g00ecf