[ES6] 複数のPromise文をつなげて書く

let isValid = (age) =>{
  return new Promise((resolve,reject) => {
    if (age < 20) return reject('err:未成年は決済できません');
    return resolve();
  });
};

let startPayment = () => {
  console.log('決済中です...');
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      let n = Math.floor(Math.random() * 100);
      if (n % 2 === 0){
        return resolve('決済が完了しました');
      }else{
        return reject('err:決済できませんでした');
      }
    },2000);
  });
};

1つ目のPromise、2つ目のPromiseのいずれかでエラーが発生すると、catch…が呼ばれる。それ以降then…でチェーンしたメソッドは呼ばれない。

未成年の場合


 isValid(10).then(() => {

 }).then(() => {
   return startPayment()
 }).then((msg)=> {
  console.log(msg);
 }).catch((err) => {
   console.log(err);
 });

//err: 未成年は決済できません

大人の場合

isValid(30).then(() => {

 }).then(() => {
   return startPayment()
 }).then((msg)=> {
   console.log(msg);
 }).catch((err) => {
   console.log(err);
 });
//決済が完了しました OR err:決済できませんでした

ちなみに上のコードはPromise.allを使って以下のように書くことが出来る。

Promise.all([isValid(30),startPayment()]).then((vals) => {
console.log(vals)
}).catch((err) => {
console.log(err)
}

Promiseを使うことでcallbackがネストするよりははるかに読みやすく書ける。

Related Contents

Pickup Contents