From bd8893649861fe29cdb4acf3d0dc211a2a925ab2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jan 2022 16:53:32 +0900 Subject: Promise オブジェクト以下の記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/promise/catch/index.html | 188 ------------- .../global_objects/promise/catch/index.md | 188 +++++++++++++ .../global_objects/promise/finally/index.html | 107 -------- .../global_objects/promise/finally/index.md | 107 ++++++++ .../global_objects/promise/promise/index.html | 107 -------- .../global_objects/promise/promise/index.md | 107 ++++++++ .../global_objects/promise/race/index.html | 180 ------------- .../reference/global_objects/promise/race/index.md | 180 +++++++++++++ .../global_objects/promise/reject/index.html | 72 ----- .../global_objects/promise/reject/index.md | 72 +++++ .../global_objects/promise/resolve/index.html | 137 ---------- .../global_objects/promise/resolve/index.md | 137 ++++++++++ .../global_objects/promise/then/index.html | 298 --------------------- .../reference/global_objects/promise/then/index.md | 298 +++++++++++++++++++++ 14 files changed, 1089 insertions(+), 1089 deletions(-) delete mode 100644 files/ja/web/javascript/reference/global_objects/promise/catch/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/promise/catch/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/promise/finally/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/promise/finally/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/promise/promise/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/promise/promise/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/promise/race/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/promise/race/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/promise/reject/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/promise/reject/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/promise/resolve/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/promise/resolve/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/promise/then/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/promise/then/index.md (limited to 'files/ja/web/javascript/reference/global_objects') diff --git a/files/ja/web/javascript/reference/global_objects/promise/catch/index.html b/files/ja/web/javascript/reference/global_objects/promise/catch/index.html deleted file mode 100644 index de96865a6e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/promise/catch/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Promise.prototype.catch() -slug: Web/JavaScript/Reference/Global_Objects/Promise/catch -tags: - - ECMAScript 2015 - - JavaScript - - Method - - Promise - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch ---- -
{{JSRef}}
- -

catch() メソッドは Promise を返しますが、拒否された場合のみ扱います。 {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} の呼び出しと同じ動作をします (実際、 obj.catch(onRejected) の呼び出しは内部的に obj.then(undefined, onRejected) を呼び出しています)。つまり、返値を undefined にフォールバックしたい場合でも、 onRejected 関数を提供する必要があります。 - 例えば、 obj.catch(() => {}) のようにします。

- -
{{EmbedInteractiveExample("pages/js/promise-catch.html")}}
- - - -

構文

- -
p.catch(onRejected);
-
-p.catch(function(reason) {
-   // rejection
-});
-
- -

引数

- -
-
onRejected
-
Promise が失敗した時に呼び出される {{jsxref("Function")}} です。この関数は一つの引数を持ちます。 -
-
reason
-
拒否された理由です。
-
- catch() で返される Promise は、 onRejected がエラーを発生させた場合、または返される Promise それ自体が拒否された場合は、拒否となります。それ以外の場合は、解決となります。
-
- -

返値

- -

内部的には、呼び出されたオブジェクトの Promise.prototype.then を呼び出し、引数に undefined と、受け取った onRejected ハンドラーを渡します。返値はこの呼び出しの値であり、すなわち {{jsxref("Promise")}} です。

- -
-

なお、以下の例は Error のインスタンスを投げます。これは文字列を投げる場合と比較して、良い習慣と見なされています。そうでなければ、キャッチを実行する部分で引数が string か error かをチェックする必要があり、スタックトレースのような価値のある情報を失う可能性があります。

-
- -

内部呼び出しの例

- -
// 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.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()]
-
- -

解説

- -

catch メソッドは複合したプロミスの複合のエラー処理に使用されます。これは {{jsxref("Promise")}} を返しますので、姉妹メソッドである {{jsxref("Promise.then", "then()")}} と同様の方法でチェーン可能です。

- -

例

- -

catch メソッドの使用とチェーン化

- -
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.error(e.message); // "oh, no!"
-}).then(function(){
-  console.log('after a catch the chain is restored');
-}, function () {
-  console.log('Not fired due to the catch');
-});
-
-// 以下は、上記と同様に動作します
-p1.then(function(value) {
-  console.log(value); // "Success!"
-  return Promise.reject('oh, no!');
-}).catch(function(e) {
-  console.error(e); // "oh, no!"
-}).then(function(){
-  console.log('after a catch the chain is restored');
-}, function () {
-  console.log('Not fired due to the catch');
-});
-
- -

エラーを投げたことを知る

- -
// 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.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!');
-  }, 1000);
-});
-
-p2.catch(function(e) {
-  console.error(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.error(e); // This is never called
-});
- -

解決される場合

- -
//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.error("catch p1!");
-    console.error(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);
-});
- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - 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 new file mode 100644 index 0000000000..de96865a6e --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/promise/catch/index.md @@ -0,0 +1,188 @@ +--- +title: Promise.prototype.catch() +slug: Web/JavaScript/Reference/Global_Objects/Promise/catch +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Promise + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch +--- +
{{JSRef}}
+ +

catch() メソッドは Promise を返しますが、拒否された場合のみ扱います。 {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} の呼び出しと同じ動作をします (実際、 obj.catch(onRejected) の呼び出しは内部的に obj.then(undefined, onRejected) を呼び出しています)。つまり、返値を undefined にフォールバックしたい場合でも、 onRejected 関数を提供する必要があります。 - 例えば、 obj.catch(() => {}) のようにします。

+ +
{{EmbedInteractiveExample("pages/js/promise-catch.html")}}
+ + + +

構文

+ +
p.catch(onRejected);
+
+p.catch(function(reason) {
+   // rejection
+});
+
+ +

引数

+ +
+
onRejected
+
Promise が失敗した時に呼び出される {{jsxref("Function")}} です。この関数は一つの引数を持ちます。 +
+
reason
+
拒否された理由です。
+
+ catch() で返される Promise は、 onRejected がエラーを発生させた場合、または返される Promise それ自体が拒否された場合は、拒否となります。それ以外の場合は、解決となります。
+
+ +

返値

+ +

内部的には、呼び出されたオブジェクトの Promise.prototype.then を呼び出し、引数に undefined と、受け取った onRejected ハンドラーを渡します。返値はこの呼び出しの値であり、すなわち {{jsxref("Promise")}} です。

+ +
+

なお、以下の例は Error のインスタンスを投げます。これは文字列を投げる場合と比較して、良い習慣と見なされています。そうでなければ、キャッチを実行する部分で引数が string か error かをチェックする必要があり、スタックトレースのような価値のある情報を失う可能性があります。

+
+ +

内部呼び出しの例

+ +
// 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.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()]
+
+ +

解説

+ +

catch メソッドは複合したプロミスの複合のエラー処理に使用されます。これは {{jsxref("Promise")}} を返しますので、姉妹メソッドである {{jsxref("Promise.then", "then()")}} と同様の方法でチェーン可能です。

+ +

例

+ +

catch メソッドの使用とチェーン化

+ +
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.error(e.message); // "oh, no!"
+}).then(function(){
+  console.log('after a catch the chain is restored');
+}, function () {
+  console.log('Not fired due to the catch');
+});
+
+// 以下は、上記と同様に動作します
+p1.then(function(value) {
+  console.log(value); // "Success!"
+  return Promise.reject('oh, no!');
+}).catch(function(e) {
+  console.error(e); // "oh, no!"
+}).then(function(){
+  console.log('after a catch the chain is restored');
+}, function () {
+  console.log('Not fired due to the catch');
+});
+
+ +

エラーを投げたことを知る

+ +
// 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.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!');
+  }, 1000);
+});
+
+p2.catch(function(e) {
+  console.error(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.error(e); // This is never called
+});
+ +

解決される場合

+ +
//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.error("catch p1!");
+    console.error(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);
+});
+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/promise/finally/index.html b/files/ja/web/javascript/reference/global_objects/promise/finally/index.html deleted file mode 100644 index 95b67a40d4..0000000000 --- a/files/ja/web/javascript/reference/global_objects/promise/finally/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Promise.prototype.finally() -slug: Web/JavaScript/Reference/Global_Objects/Promise/finally -tags: - - JavaScript - - Method - - Promises - - Prototype - - Reference - - finally -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally ---- -
{{JSRef}}
- -

finally() メソッドは {{jsxref("Promise")}} を返します。プロミスが確立したら、満足か拒否かにかかわらず、指定されたコールバック関数が実行されます。これにより、プロミスが成功裏に実行されたか否かに関わりなく、 Promise が処理された後に実行されなければならないコードを提供できます。

- -

これによって、プロミスの {{jsxref("Promise.then", "then()")}} ハンドラーと {{jsxref("Promise.catch", "catch()")}} ハンドラーでコードが重複することを避けることができます。

- -

構文

- -
p.finally(onFinally);
-
-p.finally(function() {
-   // 確立 (満足または拒否)
-});
-
- -

引数

- -
-
onFinally
-
Promise が確立したら呼び出される {{jsxref("Function")}}。
-
- -

返値

- -

finally ハンドラーに指定した onFinally が設定した {{jsxref("Promise")}} を返します。

- -

解説

- -

プロミスが確立した後、結果に関わらず何らかの処理や後始末を行いたいなら、finally() メソッドは役立ちます。

- -

finally() メソッドは .then(onFinally, onFinally) の呼び出しとよく似ていますが、いくつかの点が異なります。

- - - -
-

補足: finally コールバック内で throw が行われた場合 (または、拒否されたプロミスを返した場合)、 throw を呼び出すときに指定された拒否理由と共に新しいプロミスが拒否されます。

-
- -

例

- -

finally の使用

- -
let isLoading = true;
-
-fetch(myRequest).then(function(response) {
-    var contentType = response.headers.get("content-type");
-    if(contentType && contentType.includes("application/json")) {
-      return response.json();
-    }
-    throw new TypeError("Oops, we haven't got JSON!");
-  })
-  .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; });
-
-
- - - -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - 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 new file mode 100644 index 0000000000..95b67a40d4 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/promise/finally/index.md @@ -0,0 +1,107 @@ +--- +title: Promise.prototype.finally() +slug: Web/JavaScript/Reference/Global_Objects/Promise/finally +tags: + - JavaScript + - Method + - Promises + - Prototype + - Reference + - finally +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally +--- +
{{JSRef}}
+ +

finally() メソッドは {{jsxref("Promise")}} を返します。プロミスが確立したら、満足か拒否かにかかわらず、指定されたコールバック関数が実行されます。これにより、プロミスが成功裏に実行されたか否かに関わりなく、 Promise が処理された後に実行されなければならないコードを提供できます。

+ +

これによって、プロミスの {{jsxref("Promise.then", "then()")}} ハンドラーと {{jsxref("Promise.catch", "catch()")}} ハンドラーでコードが重複することを避けることができます。

+ +

構文

+ +
p.finally(onFinally);
+
+p.finally(function() {
+   // 確立 (満足または拒否)
+});
+
+ +

引数

+ +
+
onFinally
+
Promise が確立したら呼び出される {{jsxref("Function")}}。
+
+ +

返値

+ +

finally ハンドラーに指定した onFinally が設定した {{jsxref("Promise")}} を返します。

+ +

解説

+ +

プロミスが確立した後、結果に関わらず何らかの処理や後始末を行いたいなら、finally() メソッドは役立ちます。

+ +

finally() メソッドは .then(onFinally, onFinally) の呼び出しとよく似ていますが、いくつかの点が異なります。

+ + + +
+

補足: finally コールバック内で throw が行われた場合 (または、拒否されたプロミスを返した場合)、 throw を呼び出すときに指定された拒否理由と共に新しいプロミスが拒否されます。

+
+ +

例

+ +

finally の使用

+ +
let isLoading = true;
+
+fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get("content-type");
+    if(contentType && contentType.includes("application/json")) {
+      return response.json();
+    }
+    throw new TypeError("Oops, we haven't got JSON!");
+  })
+  .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; });
+
+
+ + + +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/promise/promise/index.html b/files/ja/web/javascript/reference/global_objects/promise/promise/index.html deleted file mode 100644 index 1b7dccdfca..0000000000 --- a/files/ja/web/javascript/reference/global_objects/promise/promise/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Promise() コンストラクター -slug: Web/JavaScript/Reference/Global_Objects/Promise/Promise -tags: - - Constructor - - JavaScript - - Promise - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/Promise ---- -
{{JSRef}}
- -

Promise コンストラクターは、主にまだプロミスに対応していない関数をラップするために使用します。

- -
{{EmbedInteractiveExample("pages/js/promise-constructor.html", "taller")}}
- - - -

構文

- -
new Promise(executor)
-
- -

引数

- -
-
executor
-
新しい Promise オブジェクトを構築する過程でコンストラクターによって呼び出される {{jsxref("function")}} です。 executor は結果をプロミスに結びつけるカスタムコードです。プログラマーが executor を書きます。この関数の形式は次のようなものであると期待されます。
-
- 
function(resolutionFunc, rejectionFunc){
-    // 通常、いくつかの非同期操作。
-}
-
-
-
コンストラクターが新しい Promise オブジェクトを生成するとき、 resolutionFunc と rejectionFunc の一対の関数も生成します。これらは Promise オブジェクトに「結束」されます。従って、 executor の中のコードが何らかの操作を実行し、その操作の結果を (値が別の Promise オブジェクトでない場合) 「満足」または「拒否」として、それぞれ resolutionFunc または rejectionFunc のどちらかを呼び出すことで反映する機会を持っています。
-
executor は意味のある返値を持ちません。これは resolutionFunc または rejectionFunc を使用することの副作用を介して通信します。この副作用とは、 Promise が「解決済み」になることです。
-
通常は、次のように動作します。 executor の内部の走査は非同期であり、コールバックを提供します。コールバックは executor のコード内で定義されます。コールバックは、 resolutionFunc を呼び出すことで終了します。 resolutionFunc の呼び出しには、引数 value が含まれます。 value は、結束された Promise オブジェクトに渡されます。 Promise オブジェクトは (非同期的に) それに関連付けられた任意の .then() を呼び出します。 .then() によって受け取った value は、 handleFulfilled の呼び出しに入力引数として渡されます (「連鎖したプロミス」の節を参照)。
-
また、 executor はエラー時に rejectionFunc を呼び出す try{} catch() ブロックを含む可能性があります。
-
これらの2つの関数の呼び出し形式は単純で、あらゆる型の引数を1つだけ取ります。もちろん、これらの関数の実際の名前は好きにしてよく、すなわち、 executor の引数として名づけます。どちらの関数も必要な時に呼び出すために使用します。
-
- -
-
- 
resolutionFunc(value) // 満足したときに呼び出される
-rejectionFunc(reason) // 拒否されたときに呼び出される
- -

返される value は、プロミスをチェーンに動的に挿入するために、別なプロミスオブジェクトにすることができます。

-
-
- -

返値

- -

new を通じて呼び出された場合、 Promise コンストラクターはプロミスオブジェクトを返します。このプロミスオブジェクトは、 resolutionFunc 関数または rejectionFunc 関数が呼び出されると「解決」になります。なお、 resolutionFunc または rejectionFunc を別な Promise オブジェクトを引数にして呼び出すと、これが「解決」であると言えますが、「満足」であるとは言えません。

- -

例

- -

新しい Promise の作成

- -

Promise オブジェクトは new キーワードとコンストラクターで作成されます。コンストラクターは executor 関数と呼ばれる引数を取ります。 executor 関数は 2 つの関数を引数として取ります。1 つめの関数 (resolve) は非同期タスクが成功して完了した場合に呼び出され、タスクの結果を値として返します。2 つめの関数 (reject) はタスクが失敗した場合に呼び出され、失敗した理由 (典型的には error オブジェクト) を返します。

- -
const myFirstPromise = new Promise((resolve, reject) => {
-  // do something asynchronous which eventually calls either:
-  //
-  //   resolve(someValue)        // fulfilled
-  // or
-  //   reject("failure reason")  // rejected
-});
-
- -

Promise を返す関数の作成

- -

関数に Promise 機能を提供するには、次のように単に Promise を返すようにします。

- -
function myAsyncFunction(url) {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest()
-    xhr.open("GET", url)
-    xhr.onload = () => resolve(xhr.responseText)
-    xhr.onerror = () => reject(xhr.statusText)
-    xhr.send()
-  });
-}
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-promise-constructor', 'Promise コンストラクター')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/global_objects/promise/promise/index.md b/files/ja/web/javascript/reference/global_objects/promise/promise/index.md new file mode 100644 index 0000000000..1b7dccdfca --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/promise/promise/index.md @@ -0,0 +1,107 @@ +--- +title: Promise() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/Promise/Promise +tags: + - Constructor + - JavaScript + - Promise + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/Promise +--- +
{{JSRef}}
+ +

Promise コンストラクターは、主にまだプロミスに対応していない関数をラップするために使用します。

+ +
{{EmbedInteractiveExample("pages/js/promise-constructor.html", "taller")}}
+ + + +

構文

+ +
new Promise(executor)
+
+ +

引数

+ +
+
executor
+
新しい Promise オブジェクトを構築する過程でコンストラクターによって呼び出される {{jsxref("function")}} です。 executor は結果をプロミスに結びつけるカスタムコードです。プログラマーが executor を書きます。この関数の形式は次のようなものであると期待されます。
+
+ 
function(resolutionFunc, rejectionFunc){
+    // 通常、いくつかの非同期操作。
+}
+
+
+
コンストラクターが新しい Promise オブジェクトを生成するとき、 resolutionFunc と rejectionFunc の一対の関数も生成します。これらは Promise オブジェクトに「結束」されます。従って、 executor の中のコードが何らかの操作を実行し、その操作の結果を (値が別の Promise オブジェクトでない場合) 「満足」または「拒否」として、それぞれ resolutionFunc または rejectionFunc のどちらかを呼び出すことで反映する機会を持っています。
+
executor は意味のある返値を持ちません。これは resolutionFunc または rejectionFunc を使用することの副作用を介して通信します。この副作用とは、 Promise が「解決済み」になることです。
+
通常は、次のように動作します。 executor の内部の走査は非同期であり、コールバックを提供します。コールバックは executor のコード内で定義されます。コールバックは、 resolutionFunc を呼び出すことで終了します。 resolutionFunc の呼び出しには、引数 value が含まれます。 value は、結束された Promise オブジェクトに渡されます。 Promise オブジェクトは (非同期的に) それに関連付けられた任意の .then() を呼び出します。 .then() によって受け取った value は、 handleFulfilled の呼び出しに入力引数として渡されます (「連鎖したプロミス」の節を参照)。
+
また、 executor はエラー時に rejectionFunc を呼び出す try{} catch() ブロックを含む可能性があります。
+
これらの2つの関数の呼び出し形式は単純で、あらゆる型の引数を1つだけ取ります。もちろん、これらの関数の実際の名前は好きにしてよく、すなわち、 executor の引数として名づけます。どちらの関数も必要な時に呼び出すために使用します。
+
+ +
+
+ 
resolutionFunc(value) // 満足したときに呼び出される
+rejectionFunc(reason) // 拒否されたときに呼び出される
+ +

返される value は、プロミスをチェーンに動的に挿入するために、別なプロミスオブジェクトにすることができます。

+
+
+ +

返値

+ +

new を通じて呼び出された場合、 Promise コンストラクターはプロミスオブジェクトを返します。このプロミスオブジェクトは、 resolutionFunc 関数または rejectionFunc 関数が呼び出されると「解決」になります。なお、 resolutionFunc または rejectionFunc を別な Promise オブジェクトを引数にして呼び出すと、これが「解決」であると言えますが、「満足」であるとは言えません。

+ +

例

+ +

新しい Promise の作成

+ +

Promise オブジェクトは new キーワードとコンストラクターで作成されます。コンストラクターは executor 関数と呼ばれる引数を取ります。 executor 関数は 2 つの関数を引数として取ります。1 つめの関数 (resolve) は非同期タスクが成功して完了した場合に呼び出され、タスクの結果を値として返します。2 つめの関数 (reject) はタスクが失敗した場合に呼び出され、失敗した理由 (典型的には error オブジェクト) を返します。

+ +
const myFirstPromise = new Promise((resolve, reject) => {
+  // do something asynchronous which eventually calls either:
+  //
+  //   resolve(someValue)        // fulfilled
+  // or
+  //   reject("failure reason")  // rejected
+});
+
+ +

Promise を返す関数の作成

+ +

関数に Promise 機能を提供するには、次のように単に Promise を返すようにします。

+ +
function myAsyncFunction(url) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest()
+    xhr.open("GET", url)
+    xhr.onload = () => resolve(xhr.responseText)
+    xhr.onerror = () => reject(xhr.statusText)
+    xhr.send()
+  });
+}
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-promise-constructor', 'Promise コンストラクター')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/promise/race/index.html b/files/ja/web/javascript/reference/global_objects/promise/race/index.html deleted file mode 100644 index ed5e913f87..0000000000 --- a/files/ja/web/javascript/reference/global_objects/promise/race/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Promise.race() -slug: Web/JavaScript/Reference/Global_Objects/Promise/race -tags: - - ECMAScript 2015 - - JavaScript - - Method - - Promise - - Reference - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race ---- -
{{JSRef}}
- -

Promise.race() メソッドは、反復可能オブジェクトの中の Promise のうちの1つが解決または拒否するとすぐに、その Promise の値または理由で解決または拒否する Promise を返します。

- -
{{EmbedInteractiveExample("pages/js/promise-race.html", "taller")}}
- - - -

構文

- -
Promise.race(iterable);
- -

引数

- -
-
iterable
-
{{jsxref("Array")}} のような反復可能なオブジェクト。 iterable を確認してください。
-
- -

返値

- -

待ち状態の {{jsxref("Promise")}} で、反復可能オブジェクトの中で最初に解決または拒否した Promise の値を非同期に産出します。

- -

説明

- -

race 関数は、引数として渡された反復可能オブジェクトの中にある複数の Promise の中で解決する最初の Promise と同じ方法で解決される (同じ値を取る) Promise を返します。

- -

渡された反復可能オブジェクトが空の場合、返される Promise はずっと待ち状態のままです。

- -

反復可能オブジェクトに1つ以上の Promise 以外の値やすでに解決済みの Promise が含まれていた場合、 Promise.race は反復可能オブジェクトの中で見つけたこれらの値の内の最初の一つで解決します。

- -

例

- -

Promise.race の非同期性

- -

以下の例は、 Promise.race の非同期性を示しています。

- -
// we are passing as argument an array of promises that are already resolved,
-// to trigger Promise.race as soon as possible
-var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
-
-var p = Promise.race(resolvedPromisesArray);
-// immediately logging the value of p
-console.log(p);
-
-// using setTimeout we can execute code after the stack is empty
-setTimeout(function(){
-    console.log('the stack is now empty');
-    console.log(p);
-});
-
-// logs, in order:
-// Promise { <state>: "pending" }
-// the stack is now empty
-// Promise { <state>: "fulfilled", <value>: 33 }
- -

空の反復可能オブジェクトを渡すと、無限に解決しない Promise が返されます。

- -
var foreverPendingPromise = Promise.race([]);
-console.log(foreverPendingPromise);
-setTimeout(function(){
-    console.log('the stack is now empty');
-    console.log(foreverPendingPromise);
-});
-
-// logs, in order:
-// Promise { <state>: "pending" }
-// the stack is now empty
-// Promise { <state>: "pending" }
-
- -

反復可能オブジェクトの中に1つ以上の Promise 以外の値や、すでに解決した Promise が含まれていると、 Promise.race は配列の中で見つかった最初のこれらの値で解決します。

- -
var foreverPendingPromise = Promise.race([]);
-var alreadyFulfilledProm = Promise.resolve(100);
-
-var arr = [foreverPendingPromise, alreadyFulfilledProm, "non-Promise value"];
-var arr2 = [foreverPendingPromise, "non-Promise value", Promise.resolve(100)];
-var p = Promise.race(arr);
-var p2 = Promise.race(arr2);
-
-console.log(p);
-console.log(p2);
-setTimeout(function(){
-    console.log('the stack is now empty');
-    console.log(p);
-    console.log(p2);
-});
-
-// logs, in order:
-// Promise { <state>: "pending" }
-// Promise { <state>: "pending" }
-// the stack is now empty
-// Promise { <state>: "fulfilled", <value>: 100 }
-// Promise { <state>: "fulfilled", <value>: "non-Promise value" }
-
- -

Promise.race の使用 – setTimeout を使用した例

- -
var p1 = new Promise(function(resolve, reject) {
-    setTimeout(() => resolve('one'), 500);
-});
-var p2 = new Promise(function(resolve, reject) {
-    setTimeout(() => resolve('two'), 100);
-});
-
-Promise.race([p1, p2])
-.then(function(value) {
-  console.log(value); // "two"
-  // Both fulfill, but p2 is faster
-});
-
-var p3 = new Promise(function(resolve, reject) {
-    setTimeout(() => resolve('three'), 100);
-});
-var p4 = new Promise(function(resolve, reject) {
-    setTimeout(() => reject(new Error('four')), 500);
-});
-
-Promise.race([p3, p4])
-.then(function(value) {
-  console.log(value); // "three"
-  // p3 is faster, so it fulfills
-}, function(reason) {
-  // Not called
-});
-
-var p5 = new Promise(function(resolve, reject) {
-    setTimeout(() => resolve('five'), 500);
-});
-var p6 = new Promise(function(resolve, reject) {
-    setTimeout(() => reject(new Error('six')), 100);
-});
-
-Promise.race([p5, p6])
-.then(function(value) {
-  // Not called
-}, function(error) {
-  console.log(error.message); // "six"
-  // p6 is faster, so it rejects
-});
-
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/global_objects/promise/race/index.md b/files/ja/web/javascript/reference/global_objects/promise/race/index.md new file mode 100644 index 0000000000..ed5e913f87 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/promise/race/index.md @@ -0,0 +1,180 @@ +--- +title: Promise.race() +slug: Web/JavaScript/Reference/Global_Objects/Promise/race +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Promise + - Reference + - メソッド +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race +--- +
{{JSRef}}
+ +

Promise.race() メソッドは、反復可能オブジェクトの中の Promise のうちの1つが解決または拒否するとすぐに、その Promise の値または理由で解決または拒否する Promise を返します。

+ +
{{EmbedInteractiveExample("pages/js/promise-race.html", "taller")}}
+ + + +

構文

+ +
Promise.race(iterable);
+ +

引数

+ +
+
iterable
+
{{jsxref("Array")}} のような反復可能なオブジェクト。 iterable を確認してください。
+
+ +

返値

+ +

待ち状態の {{jsxref("Promise")}} で、反復可能オブジェクトの中で最初に解決または拒否した Promise の値を非同期に産出します。

+ +

説明

+ +

race 関数は、引数として渡された反復可能オブジェクトの中にある複数の Promise の中で解決する最初の Promise と同じ方法で解決される (同じ値を取る) Promise を返します。

+ +

渡された反復可能オブジェクトが空の場合、返される Promise はずっと待ち状態のままです。

+ +

反復可能オブジェクトに1つ以上の Promise 以外の値やすでに解決済みの Promise が含まれていた場合、 Promise.race は反復可能オブジェクトの中で見つけたこれらの値の内の最初の一つで解決します。

+ +

例

+ +

Promise.race の非同期性

+ +

以下の例は、 Promise.race の非同期性を示しています。

+ +
// we are passing as argument an array of promises that are already resolved,
+// to trigger Promise.race as soon as possible
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.race(resolvedPromisesArray);
+// immediately logging the value of p
+console.log(p);
+
+// using setTimeout we can execute code after the stack is empty
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(p);
+});
+
+// logs, in order:
+// Promise { <state>: "pending" }
+// the stack is now empty
+// Promise { <state>: "fulfilled", <value>: 33 }
+ +

空の反復可能オブジェクトを渡すと、無限に解決しない Promise が返されます。

+ +
var foreverPendingPromise = Promise.race([]);
+console.log(foreverPendingPromise);
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(foreverPendingPromise);
+});
+
+// logs, in order:
+// Promise { <state>: "pending" }
+// the stack is now empty
+// Promise { <state>: "pending" }
+
+ +

反復可能オブジェクトの中に1つ以上の Promise 以外の値や、すでに解決した Promise が含まれていると、 Promise.race は配列の中で見つかった最初のこれらの値で解決します。

+ +
var foreverPendingPromise = Promise.race([]);
+var alreadyFulfilledProm = Promise.resolve(100);
+
+var arr = [foreverPendingPromise, alreadyFulfilledProm, "non-Promise value"];
+var arr2 = [foreverPendingPromise, "non-Promise value", Promise.resolve(100)];
+var p = Promise.race(arr);
+var p2 = Promise.race(arr2);
+
+console.log(p);
+console.log(p2);
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(p);
+    console.log(p2);
+});
+
+// logs, in order:
+// Promise { <state>: "pending" }
+// Promise { <state>: "pending" }
+// the stack is now empty
+// Promise { <state>: "fulfilled", <value>: 100 }
+// Promise { <state>: "fulfilled", <value>: "non-Promise value" }
+
+ +

Promise.race の使用 – setTimeout を使用した例

+ +
var p1 = new Promise(function(resolve, reject) {
+    setTimeout(() => resolve('one'), 500);
+});
+var p2 = new Promise(function(resolve, reject) {
+    setTimeout(() => resolve('two'), 100);
+});
+
+Promise.race([p1, p2])
+.then(function(value) {
+  console.log(value); // "two"
+  // Both fulfill, but p2 is faster
+});
+
+var p3 = new Promise(function(resolve, reject) {
+    setTimeout(() => resolve('three'), 100);
+});
+var p4 = new Promise(function(resolve, reject) {
+    setTimeout(() => reject(new Error('four')), 500);
+});
+
+Promise.race([p3, p4])
+.then(function(value) {
+  console.log(value); // "three"
+  // p3 is faster, so it fulfills
+}, function(reason) {
+  // Not called
+});
+
+var p5 = new Promise(function(resolve, reject) {
+    setTimeout(() => resolve('five'), 500);
+});
+var p6 = new Promise(function(resolve, reject) {
+    setTimeout(() => reject(new Error('six')), 100);
+});
+
+Promise.race([p5, p6])
+.then(function(value) {
+  // Not called
+}, function(error) {
+  console.log(error.message); // "six"
+  // p6 is faster, so it rejects
+});
+
+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/promise/reject/index.html b/files/ja/web/javascript/reference/global_objects/promise/reject/index.html deleted file mode 100644 index c606352586..0000000000 --- a/files/ja/web/javascript/reference/global_objects/promise/reject/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Promise.reject() -slug: Web/JavaScript/Reference/Global_Objects/Promise/reject -tags: - - ECMAScript 2015 - - JavaScript - - Method - - Promise - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject ---- -
{{JSRef}}
- -

Promise.reject() メソッドは、引数で与えられた理由でリジェクトされた Promise オブジェクトを返します。

- -
{{EmbedInteractiveExample("pages/js/promise-reject.html")}}
- - - -

構文

- -
Promise.reject(reason);
- -

引数

- -
-
reason
-
このPromiseオブジェクトのリジェクトされた理由
-
- -

返値

- -

与えられた理由で拒否された {{jsxref("Promise")}} 。

- -

解説

- -

静的な Promise.reject 関数は拒否された Promise を返します。デバッグのためにキャッチするエラーを選別したい場合は、 reason を instanceof {{jsxref("Error")}} にかけると良いでしょう。

- -

例

- -

静的な Promise.reject() メソッドの使用

- -
Promise.reject(new Error('fail')).then(function() {
-  // ここは呼ばれません。
-}, function(error) {
-  console.error(error); // Stacktrace
-});
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/global_objects/promise/reject/index.md b/files/ja/web/javascript/reference/global_objects/promise/reject/index.md new file mode 100644 index 0000000000..c606352586 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/promise/reject/index.md @@ -0,0 +1,72 @@ +--- +title: Promise.reject() +slug: Web/JavaScript/Reference/Global_Objects/Promise/reject +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Promise + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject +--- +
{{JSRef}}
+ +

Promise.reject() メソッドは、引数で与えられた理由でリジェクトされた Promise オブジェクトを返します。

+ +
{{EmbedInteractiveExample("pages/js/promise-reject.html")}}
+ + + +

構文

+ +
Promise.reject(reason);
+ +

引数

+ +
+
reason
+
このPromiseオブジェクトのリジェクトされた理由
+
+ +

返値

+ +

与えられた理由で拒否された {{jsxref("Promise")}} 。

+ +

解説

+ +

静的な Promise.reject 関数は拒否された Promise を返します。デバッグのためにキャッチするエラーを選別したい場合は、 reason を instanceof {{jsxref("Error")}} にかけると良いでしょう。

+ +

例

+ +

静的な Promise.reject() メソッドの使用

+ +
Promise.reject(new Error('fail')).then(function() {
+  // ここは呼ばれません。
+}, function(error) {
+  console.error(error); // Stacktrace
+});
+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/promise/resolve/index.html b/files/ja/web/javascript/reference/global_objects/promise/resolve/index.html deleted file mode 100644 index 31196005df..0000000000 --- a/files/ja/web/javascript/reference/global_objects/promise/resolve/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Promise.resolve() -slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve -tags: - - ECMAScript 2015 - - JavaScript - - Method - - Promise - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve ---- -
{{JSRef}}
- -

Promise.resolve() メソッドは、与えられた値で解決した {{jsxref("Promise")}} オブジェクトを返します。その値がプロミスであった場合は、そのプロミスが返されます。その値が thenable (すなわち {{jsxref("Promise.then", "\"then\" メソッド")}} を持っている場合) であれば、返されるプロミスは thenable を「追跡」し、その最終的な状態を採用します。それ以外の場合は、引数で満足したプロミスが返されます。この関数は複数階層のプロミス風オブジェクト (例えば、何かで解決するプロミスで解決するプロミス) を単一の階層に平坦化します。

- -

構文

- -
Promise.resolve(value);
-
- -

引数

- -
-
value
-
この Promise で解決する際の引数。解決するための Promise または thenable にすることもできます。
-
- -

返値

- -

与えられた値で解決された {{jsxref("Promise")}}、または value がプロミスオブジェクトであった場合、値として渡されたプロミスです。

- -

解説

- -

静的な Promise.resolve 関数は、解決する Promise を返します。

- -

例

- -

静的な Promise.resolve メソッドの使用

- -
Promise.resolve('Success').then(function(value) {
-  console.log(value); // "Success"
-}, function(value) {
-  // not called
-});
-
- -

配列で解決

- -
var p = Promise.resolve([1,2,3]);
-p.then(function(v) {
-  console.log(v[0]); // 1
-});
-
- -

別の Promise で解決

- -
var original = Promise.resolve(33);
-var cast = Promise.resolve(original);
-cast.then(function(value) {
-  console.log('value: ' + value);
-});
-console.log('original === cast ? ' + (original === cast));
-
-// ログの順番:
-// original === cast ? true
-// value: 33
-
- -

ログの順番が反転するのは、 then ハンドラーが非同期に呼び出されるために発生します。 then がどのように動作するのかはこちらを参照してください。

- -

thenables で解決してエラーを発生させる

- -
// Resolving a thenable object
-var p1 = Promise.resolve({
-  then: function(onFulfill, onReject) { onFulfill('fulfilled!'); }
-});
-console.log(p1 instanceof Promise) // true, object casted to a Promise
-
-p1.then(function(v) {
-    console.log(v); // "fulfilled!"
-  }, function(e) {
-    // not called
-});
-
-// Thenable throws before callback
-// Promise rejects
-var thenable = { then: function(resolve) {
-  throw new TypeError('Throwing');
-  resolve('Resolving');
-}};
-
-var p2 = Promise.resolve(thenable);
-p2.then(function(v) {
-  // not called
-}, function(e) {
-  console.error(e); // TypeError: Throwing
-});
-
-// Thenable throws after callback
-// Promise resolves
-var thenable = { then: function(resolve) {
-  resolve('Resolving');
-  throw new TypeError('Throwing');
-}};
-
-var p3 = Promise.resolve(thenable);
-p3.then(function(v) {
-  console.log(v); // "Resolving"
-}, function(e) {
-  // not called
-});
-
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/global_objects/promise/resolve/index.md b/files/ja/web/javascript/reference/global_objects/promise/resolve/index.md new file mode 100644 index 0000000000..31196005df --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/promise/resolve/index.md @@ -0,0 +1,137 @@ +--- +title: Promise.resolve() +slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Promise + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve +--- +
{{JSRef}}
+ +

Promise.resolve() メソッドは、与えられた値で解決した {{jsxref("Promise")}} オブジェクトを返します。その値がプロミスであった場合は、そのプロミスが返されます。その値が thenable (すなわち {{jsxref("Promise.then", "\"then\" メソッド")}} を持っている場合) であれば、返されるプロミスは thenable を「追跡」し、その最終的な状態を採用します。それ以外の場合は、引数で満足したプロミスが返されます。この関数は複数階層のプロミス風オブジェクト (例えば、何かで解決するプロミスで解決するプロミス) を単一の階層に平坦化します。

+ +

構文

+ +
Promise.resolve(value);
+
+ +

引数

+ +
+
value
+
この Promise で解決する際の引数。解決するための Promise または thenable にすることもできます。
+
+ +

返値

+ +

与えられた値で解決された {{jsxref("Promise")}}、または value がプロミスオブジェクトであった場合、値として渡されたプロミスです。

+ +

解説

+ +

静的な Promise.resolve 関数は、解決する Promise を返します。

+ +

例

+ +

静的な Promise.resolve メソッドの使用

+ +
Promise.resolve('Success').then(function(value) {
+  console.log(value); // "Success"
+}, function(value) {
+  // not called
+});
+
+ +

配列で解決

+ +
var p = Promise.resolve([1,2,3]);
+p.then(function(v) {
+  console.log(v[0]); // 1
+});
+
+ +

別の Promise で解決

+ +
var original = Promise.resolve(33);
+var cast = Promise.resolve(original);
+cast.then(function(value) {
+  console.log('value: ' + value);
+});
+console.log('original === cast ? ' + (original === cast));
+
+// ログの順番:
+// original === cast ? true
+// value: 33
+
+ +

ログの順番が反転するのは、 then ハンドラーが非同期に呼び出されるために発生します。 then がどのように動作するのかはこちらを参照してください。

+ +

thenables で解決してエラーを発生させる

+ +
// Resolving a thenable object
+var p1 = Promise.resolve({
+  then: function(onFulfill, onReject) { onFulfill('fulfilled!'); }
+});
+console.log(p1 instanceof Promise) // true, object casted to a Promise
+
+p1.then(function(v) {
+    console.log(v); // "fulfilled!"
+  }, function(e) {
+    // not called
+});
+
+// Thenable throws before callback
+// Promise rejects
+var thenable = { then: function(resolve) {
+  throw new TypeError('Throwing');
+  resolve('Resolving');
+}};
+
+var p2 = Promise.resolve(thenable);
+p2.then(function(v) {
+  // not called
+}, function(e) {
+  console.error(e); // TypeError: Throwing
+});
+
+// Thenable throws after callback
+// Promise resolves
+var thenable = { then: function(resolve) {
+  resolve('Resolving');
+  throw new TypeError('Throwing');
+}};
+
+var p3 = Promise.resolve(thenable);
+p3.then(function(v) {
+  console.log(v); // "Resolving"
+}, function(e) {
+  // not called
+});
+
+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/promise/then/index.html b/files/ja/web/javascript/reference/global_objects/promise/then/index.html deleted file mode 100644 index 8fef7186d4..0000000000 --- a/files/ja/web/javascript/reference/global_objects/promise/then/index.html +++ /dev/null @@ -1,298 +0,0 @@ ---- -title: Promise.prototype.then() -slug: Web/JavaScript/Reference/Global_Objects/Promise/then -tags: - - ECMAScript 2015 - - JavaScript - - Method - - Promise - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then ---- -
{{JSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/js/promise-then.html")}}
- - - -
-

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

-
- -

構文

- -
p.then(onFulfilled[, onRejected]);
-
-p.then(value => {
-  // fulfillment
-}, reason => {
-  // rejection
-});
-
- -

引数

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

返値

- -

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

- - - -

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

- -
// 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 => {
-    console.log("this gets called after the end of the main stack. the value received and returned is: " + value);
-    return value;
-});
-// instantly logging the value of thenProm
-console.log(thenProm);
-
-// using setTimeout we can postpone the execution of a function to the moment the stack is empty
-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}
- -

説明

- -

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

- -

例

- -

then メソッドの使用

- -
var p1 = new Promise((resolve, reject) => {
-  resolve('Success!');
-  // or
-  // reject(new Error("Error!"));
-});
-
-p1.then(value => {
-  console.log(value); // Success!
-}, reason => {
-  console.error(reason); // Error!
-} );
-
- -

チェーン

- -

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

- -

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

- -
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) {
-      setTimeout(function() {
-        string += 'bar';
-        resolve(string);
-      }, 1);
-    });
-  })
-  // 2. receive "foobar", register a callback function to work on that string
-  // and print it to the console, but not before returning the unworked on
-  // string to the next then
-  .then(function(string) {
-    setTimeout(function() {
-      string += 'baz';
-      console.log(string); // foobarbaz
-    }, 1)
-    return string;
-  })
-  // 3. print helpful messages about how the code in this section will be run
-  // before the string is actually processed by the mocked asynchronous code in the
-  // previous then block.
-  .then(function(string) {
-    console.log("Last Then:  oops... didn't bother to instantiate and return " +
-                "a promise in the prior then so the sequence may be a bit " +
-                "surprising");
-
-    // Note that `string` will not have the 'baz' bit of it at this point. This
-    // is because we mocked that to happen asynchronously with a setTimeout function
-    console.log(string); // foobar
-  });
-
-// 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
- -

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

- -
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 + ' - A synchronous value works'); // 2 - A synchronous value works
-});
-
-p2.then(function(value) {
-  console.log(value); // 1
-});
-
- -

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

- -
Promise.resolve()
-  .then(() => {
-    // Makes .then() return a rejected promise
-    throw new Error('Oh no!');
-  })
-  .then(() => {
-    console.log('Not called.');
-  }, error => {
-    console.error('onRejected function called: ' + error.message);
-  });
- -

その他の場合はすべて、解決中 (resolving) の Promise が返されます。次の例では、チェーン上の以前の Promise が拒否されていても、最初の then() は解決中の Promise に含まれた 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
- -

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

- -
Promise.resolve()
-  .then(() => {
-    // Makes .then() return a rejected promise
-    throw new Error('Oh no!');
-  })
-  .catch(error => {
-    console.error('onRejected function called: ' + error.message);
-  })
-  .then(() => {
-    console.log("I am always called even if the prior then's promise rejects");
-  });
- -

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

- -
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 => {
-    if (response.headers.get('content-type') != 'application/json') {
-      throw new TypeError();
-    }
-    var j = response.json();
-    // maybe do something with j
-    return j; // fulfillment value given to user of
-              // fetch_current_data().then()
-  });
-}
-
- -

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

- -
function resolveLater(resolve, reject) {
-  setTimeout(function() {
-    resolve(10);
-  }, 1000);
-}
-function rejectLater(resolve, reject) {
-  setTimeout(function() {
-    reject(new Error('Error'));
-  }, 1000);
-}
-
-var p1 = Promise.resolve('foo');
-var p2 = p1.then(function() {
-  // Return promise here, that will be resolved to 10 after 1 second
-  return new Promise(resolveLater);
-});
-p2.then(function(v) {
-  console.log('resolved', v);  // "resolved", 10
-}, function(e) {
-  // not called
-  console.error('rejected', e);
-});
-
-var p3 = p1.then(function() {
-  // Return promise here, that will be rejected with 'Error' after 1 second
-  return new Promise(rejectLater);
-});
-p3.then(function(v) {
-  // not called
-  console.log('resolved', v);
-}, function(e) {
-  console.error('rejected', e); // "rejected", 'Error'
-});
-
- -

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);
-
-  const rfab = Reflect.apply.bind; // (thisArg, fn, thisArg, [...args])
-  const nextTick = (fn, ...args) => (
-    fn !== undefined
-    ? Promise.resolve(args).then(rfab(null, fn, null))
-    : nextTickPromise(),
-    undefined
-  );
-  nextTick.ntp = nextTickPromise;
-
-  return nextTick;
-})();
-
- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - 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 new file mode 100644 index 0000000000..8fef7186d4 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/promise/then/index.md @@ -0,0 +1,298 @@ +--- +title: Promise.prototype.then() +slug: Web/JavaScript/Reference/Global_Objects/Promise/then +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Promise + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then +--- +
{{JSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/js/promise-then.html")}}
+ + + +
+

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

+
+ +

構文

+ +
p.then(onFulfilled[, onRejected]);
+
+p.then(value => {
+  // fulfillment
+}, reason => {
+  // rejection
+});
+
+ +

引数

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

返値

+ +

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

+ + + +

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

+ +
// 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 => {
+    console.log("this gets called after the end of the main stack. the value received and returned is: " + value);
+    return value;
+});
+// instantly logging the value of thenProm
+console.log(thenProm);
+
+// using setTimeout we can postpone the execution of a function to the moment the stack is empty
+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}
+ +

説明

+ +

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

+ +

例

+ +

then メソッドの使用

+ +
var p1 = new Promise((resolve, reject) => {
+  resolve('Success!');
+  // or
+  // reject(new Error("Error!"));
+});
+
+p1.then(value => {
+  console.log(value); // Success!
+}, reason => {
+  console.error(reason); // Error!
+} );
+
+ +

チェーン

+ +

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

+ +

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

+ +
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) {
+      setTimeout(function() {
+        string += 'bar';
+        resolve(string);
+      }, 1);
+    });
+  })
+  // 2. receive "foobar", register a callback function to work on that string
+  // and print it to the console, but not before returning the unworked on
+  // string to the next then
+  .then(function(string) {
+    setTimeout(function() {
+      string += 'baz';
+      console.log(string); // foobarbaz
+    }, 1)
+    return string;
+  })
+  // 3. print helpful messages about how the code in this section will be run
+  // before the string is actually processed by the mocked asynchronous code in the
+  // previous then block.
+  .then(function(string) {
+    console.log("Last Then:  oops... didn't bother to instantiate and return " +
+                "a promise in the prior then so the sequence may be a bit " +
+                "surprising");
+
+    // Note that `string` will not have the 'baz' bit of it at this point. This
+    // is because we mocked that to happen asynchronously with a setTimeout function
+    console.log(string); // foobar
+  });
+
+// 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
+ +

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

+ +
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 + ' - A synchronous value works'); // 2 - A synchronous value works
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+});
+
+ +

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

+ +
Promise.resolve()
+  .then(() => {
+    // Makes .then() return a rejected promise
+    throw new Error('Oh no!');
+  })
+  .then(() => {
+    console.log('Not called.');
+  }, error => {
+    console.error('onRejected function called: ' + error.message);
+  });
+ +

その他の場合はすべて、解決中 (resolving) の Promise が返されます。次の例では、チェーン上の以前の Promise が拒否されていても、最初の then() は解決中の Promise に含まれた 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
+ +

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

+ +
Promise.resolve()
+  .then(() => {
+    // Makes .then() return a rejected promise
+    throw new Error('Oh no!');
+  })
+  .catch(error => {
+    console.error('onRejected function called: ' + error.message);
+  })
+  .then(() => {
+    console.log("I am always called even if the prior then's promise rejects");
+  });
+ +

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

+ +
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 => {
+    if (response.headers.get('content-type') != 'application/json') {
+      throw new TypeError();
+    }
+    var j = response.json();
+    // maybe do something with j
+    return j; // fulfillment value given to user of
+              // fetch_current_data().then()
+  });
+}
+
+ +

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

+ +
function resolveLater(resolve, reject) {
+  setTimeout(function() {
+    resolve(10);
+  }, 1000);
+}
+function rejectLater(resolve, reject) {
+  setTimeout(function() {
+    reject(new Error('Error'));
+  }, 1000);
+}
+
+var p1 = Promise.resolve('foo');
+var p2 = p1.then(function() {
+  // Return promise here, that will be resolved to 10 after 1 second
+  return new Promise(resolveLater);
+});
+p2.then(function(v) {
+  console.log('resolved', v);  // "resolved", 10
+}, function(e) {
+  // not called
+  console.error('rejected', e);
+});
+
+var p3 = p1.then(function() {
+  // Return promise here, that will be rejected with 'Error' after 1 second
+  return new Promise(rejectLater);
+});
+p3.then(function(v) {
+  // not called
+  console.log('resolved', v);
+}, function(e) {
+  console.error('rejected', e); // "rejected", 'Error'
+});
+
+ +

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);
+
+  const rfab = Reflect.apply.bind; // (thisArg, fn, thisArg, [...args])
+  const nextTick = (fn, ...args) => (
+    fn !== undefined
+    ? Promise.resolve(args).then(rfab(null, fn, null))
+    : nextTickPromise(),
+    undefined
+  );
+  nextTick.ntp = nextTickPromise;
+
+  return nextTick;
+})();
+
+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf