Promise.prototype.then()

const promise1 = new Promise((resolve, reject) => { resolve("Success!"); }); promise1.then((value) => { console.log(value); // 予想される結果: "Success!" }); 

then(onFulfilled) then(onFulfilled, onRejected) 

const pendingPromise = new Promise(() => {}); while (true) { pendingPromise.then(doSomething); } 

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

Promise.resolve(1).then(2).then(console.log); // 1 Promise.reject(new Error("failed")).then(2, 2).then(console.log, console.log); // Error: failed 

Promise.resolve("foo") // 1. Receive "foo", concatenate "bar" to it, and resolve that to the next then .then( (string) => new Promise((resolve, reject) => { setTimeout(() => { 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((string) => { setTimeout(() => { 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((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 

const p2 = new Promise((resolve, reject) => { resolve(1); }); p2.then((value) => { console.log(value); // 1 return value + 1; }).then((value) => { console.log(value, "- A synchronous value works"); // 2 - A synchronous value works }); p2.then((value) => { console.log(value); // 1 }); 

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}`); }, ); 

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.reject(new Error("Oh no!")) .then( () => 99, () => 42, ) // onRejected は履行されたプロミスにラップされた 42 を返す .then((solution) => console.log(`Resolved with ${solution}`)); // Fulfilled with 42 

function resolveLater(resolve, reject) { setTimeout(() => { resolve(10); }, 1000); } function rejectLater(resolve, reject) { setTimeout(() => { reject(new Error("Error")); }, 1000); } const p1 = Promise.resolve("foo"); // ここでプロミスを返します。これは 1 秒後に 1 に解決されます。 const p2 = p1.then(() => new Promise(resolveLater)); p2.then( (v) => { console.log("resolved", v); // "resolved", 10 }, (e) => { // not called console.error("rejected", e); }, ); // 1 秒後に 'Error' で拒否されるプロミスをここで返します。 const p3 = p1.then(() => new Promise(rejectLater)); p3.then( (v) => { // not called console.log("resolved", v); }, (e) => { console.error("rejected", e); // "rejected", 'Error' }, ); 

function fetchCurrentData() { // fetch() API はプロミスを返します。この関数は // 同様のAPIを公開していますが、この関数の // プロミスの履行された値には、より多くの作業が // 施されていることが特徴です。 return fetch("current-data.json").then((response) => { if (response.headers.get("content-type") !== "application/json") { throw new TypeError(); } const j = response.json(); // おそらく j で何かをする // fulfillment value given to user of // fetchCurrentData().then() return j; }); } 

// 例として解決済みのプロミス 'resolvedProm' を使用すると、 // 関数呼び出し 'resolvedProm.then(...)' は直ちに新しいプロミスを返しますが、 // そのハンドラー '(value) => {...}' は console.log で示されるように非同期に呼ばれることになります。 // 新しいプロミスは 'thenProm' に代入され、 // thenProm はハンドラーが返す値で解決されます。 const resolvedProm = Promise.resolve(33); console.log(resolvedProm); const thenProm = resolvedProm.then((value) => { console.log( `this gets called after the end of the main stack. the value received is: ${value}, the value returned is: ${ value + 1 }`, ); return value + 1; }); console.log(thenProm); // setTimeout を使用すると、スタックが空になった瞬間まで関数の実行を延期することができる setTimeout(() => { console.log(thenProm); }); // Logs, in order: // Promise {[[PromiseStatus]]: "resolved", [[PromiseResult]]: 33} // Promise {[[PromiseStatus]]: "pending", [[PromiseResult]]: undefined} // "this gets called after the end of the main stack. the value received is: 33, the value returned is: 34" // Promise {[[PromiseStatus]]: "resolved", [[PromiseResult]]: 34}