翻訳サービス

Promiseオブジェクトは、非同期処理が最終的に完了する（または失敗する）ことと、その結果の値を表します。

プロミスのライフサイクル

Promiseには3つの状態があります。

1. pending
2. fulfilled
3. rejected

作成された時点では、プロミスはpendingです。 将来のある時点で、_resolve_または_reject_されることがあります。 プロミスは一度resolveまたはrejectされると、二度とresolveもrejectもされることはなく、状態も変わりません。

言い換えると：

1. pendingのとき、プロミスは：
   • fulfilledまたはrejectedの状態へ遷移できます。
2. fulfilledのとき、プロミスは：
   • 他のどの状態にも遷移してはいけません。
   • 値を持たなければならず、その値は変わってはいけません。
3. rejectedのとき、プロミスは：
   • 他のどの状態にも遷移してはいけません。
   • 理由を持たなければならず、その理由は変わってはいけません。

プロミスをresolveする

プロミスはさまざまな方法でresolveできます：

// Creates a promise that is immediately resolved
Promise.resolve(value);

// Creates a promise that is immediately resolved
new Promise((resolve) => {
  resolve(value);
});

// Chaining a promise leads to a resolved promise
somePromise.then(() => {
  // ...
  return value;
});

上記の例では、valueは_何でも_かまいません。エラー、undefined、null、あるいは別のプロミスでも構いません。 通常は、エラーではない値でresolveしたいはずです。

プロミスをrejectする

プロミスはさまざまな方法でrejectできます：

// Creates a promise that is immediately rejected
Promise.reject(reason)

// Creates a promise that is immediately rejected
new Promise((_, reject) {
  reject(reason)
})

// Chaining a promise with an error leads to a rejected promise
somePromise.then(() => {
  // ...
  throw reason
})

上記の例では、reasonは_何でも_かまいません。エラー、undefined、nullなども含まれます。 通常は、エラーでrejectしたいはずです。

プロミスのチェーン

プロミスは、resolveまたはrejectしたあと、将来の処理で_続ける_ことができます。

• promise.then()は、promiseがresolveすると呼び出されます
• promise.catch()は、promiseがrejectすると呼び出されます
• promise.finally()は、promiseがresolveまたはrejectすると呼び出されます

then

すべてのプロミスは「thenable」です。 つまり、元のプロミスがresolveすると実行されるthenという関数を利用できるということです。 promise.then(onResolved)とすると、コールバックonResolvedは元のプロミスがresolveされた値を受け取ります。 これは常に_新しい_「チェーンされた」プロミスを返します。

thenからvalueを返すと、「チェーンされた」プロミスはresolveされます。 thenの中でreasonをスローすると、「チェーンされた」プロミスはrejectされます。

const promise1 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);
});

const promise2 = promise1.then(function (value) {
  console.log(value);
  // expected output: "Success!"

  return true;
});

これは約1000ms後に"Success!"をログに出力します。 promise1の状態と値はresolvedと"Success!"になります。 promise2の状態と値はresolvedとtrueになります。

元のプロミスがrejectしたときに実行される2つ目の引数も利用できます。 promise.then(onResolved, onRejected)とすると、コールバックonResolvedは元のプロミスがresolveされた値を受け取り、コールバックonRejectedはプロミスがrejectされた理由を受け取ります。

const promise1 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);

  if (Math.random() < 0.5) {
    reject('Nope!');
  }
});

function log(value) {
  console.log(value);
  return true;
}

function shout(reason) {
  console.error(reason.toUpperCase());
  return false;
}

const promise2 = promise1.then(log, shout);

• 約2分の1のケースでは、約1000ms後に"Success!"をログに出力します。
  • promise1の状態と値はresolvedと"Success!"になります。
  • promise2の状態と値はresolvedとtrueになります。
• 約2分の1のケースでは、すぐに"NOPE!"をログに出力します。
  • promise1の状態と値はrejectedとNope!になります。
  • promise2の状態と値はresolvedとfalseになります。

ライフサイクルのルールのため、rejectしたときに約1000ms後に来るresolveは黙って無視されることを理解しておくことが大切です。一度rejectまたはresolveすると、内部状態は変えられないからです。 プロミスから値を返すとそのプロミスはresolveされ、値をスローするとrejectされることも理解しておくことが大切です。 promise1がresolveし、チェーンされたonResolved（then(onResolved)）がある場合、その続きは新しいプロミスで、resolveまたはrejectできます。 promise1がrejectし、チェーンされたonRejected（then(, onRejected)）がある場合、その続きは新しいプロミスで、resolveまたはrejectできます。

catch

エラーを捕捉して、元のプロミスがrejectしたときだけ続行したい場合もあります。 promise.catch(onCatch)とすると、コールバックonCatchは元のプロミスがrejectされた理由を受け取ります。 これは常に_新しい_「チェーンされた」プロミスを返します。

catchからvalueを返すと、「チェーンされた」プロミスはresolveされます。 catchの中でreasonをスローすると、「チェーンされた」プロミスはrejectされます。

const promise1 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);

  if (Math.random() < 0.5) {
    reject('Nope!');
  }
});

function log(value) {
  console.log(value);
  return 'done';
}

function recover(reason) {
  console.error(reason.toUpperCase());
  return 42;
}

const promise2 = promise1.catch(recover).then(log);

約2分の1のケースでは、約1000ms後に"Success!"をログに出力します。 残りの約2分の1のケースでは、すぐに42をログに出力します。

• promise1がresolveすると、catchはスキップされてthenに到達し、値をログに出力します。
  • promise1の状態と値はresolvedと"Success!"になります。
  • promise2の状態と値はresolvedと"done"になります。
• promise1がrejectすると、catchが実行され、そこで_値が返され_、チェーンはresolvedになり、thenに到達して値をログに出力します。
  • promise1の状態と値はrejectedと"Nope!"になります。
  • promise2の状態と値はresolvedと"done"になります。

finally

プロミスがresolveしてもrejectしても、プロミスが確定したあとにコードを実行したい場合もあります。 promise.finally(onSettled)とすると、コールバックonSettledは何も受け取りません。 これは常に_新しい_「チェーンされた」プロミスを返します。

finallyからvalueを返すと、元のプロミスの状態と値がコピーされ、valueは無視されます。 finallyの中でreasonをスローすると、「チェーンされた」プロミスはrejectされ、元のプロミスの状態と値、または理由が上書きされます。

例

さまざまなメソッドを組み合わせた例です：

const myPromise = new Promise(function (resolve, reject) {
  const sampleData = [2, 4, 6, 8];
  const randomNumber = Math.round(Math.random() * 5);

  if (sampleData[randomNumber]) {
    resolve(sampleData[randomNumber]);
  } else {
    reject('Sampling did not result in a sample');
  }
});

const finalPromise = myPromise
  .then(function (sampled) {
    // If the random number was 0, 1, 2, or 3, this will be
    // reached and the number 2, 4, 6, or 8 will be logged.
    console.log(`Sampled data: ${sampled}`);
    return 'yay';
  })
  .catch(function (reason) {
    // If the random number was 4 or 5, this will be reached and
    // reason will be "An error occurred". The entire chain will
    // then reject with an Error with the reason as message.
    throw new Error(reason);
  })
  .finally(function () {
    // This will always log after either the sampled data is
    // logged or the error is raised.
    console.log('Promise completed');
  });

• randomNumberが0-3のケース：
  • myPromiseは値2, 4, 6, or 8でresolveされます
  • finalPromiseは値'yay'でresolveされます
  • ログが2つ出力されます：
    • Sampled data: ...
    • Promise completed
• randomNumberが4-5のケース：
  • myPromiseは理由'Sampling did not result in a sample'でrejectされます
  • finalPromiseは理由Error('Sampling did not result in a sample')でrejectされます
  • ログが1つ出力されます：
    • Promise completed
    • 環境によっては、"uncaught rejected promise: Error('Sampling did not result in a sample')"というログが出力されます

上記のように、rejectは文字列でも機能し、プロミスはErrorでrejectすることもできます。