【javascript】Promise

Promis

• 非同期処理をより簡単に、可読性が上がるように書けるようにしたもの。
• ES6から導入された。

構文

• thenなど連続して扱える。非同期チェーンがしやすい。
• resolve, rejectいずれかを呼ぶ

new Promise(function(resolve, reject){
    //同期処理
    resolve('args') // thenの処理へ 
    reject() // catchの処理へ
    console.log('Promise')
}).then(function(args){ //非同期処理 //resolveから引数を受け取れる。
     console.log('then1' + args) // >>> then1 args
     return args //return 引数とすると次のthenに引数を渡すことができる。
    })
.then(function(args){
    console.log('then2 +' + args)
    console.log('then2')
    throw new Error(); //catchの処理へ移行できる。
})
.then(function(){
    console.log('then3')
})
.catch(function(){ //非同期処理
    console.log('catch')
})
.finally(function(args){ //非同期処理, resolve,reject共に終了処理される。 //引数は受け取れない
    console.log('finally' + args) // >>> finallyundefined
})

Promiseチェーン

• 引数valを受け取り、Promiseのインスタンス化したsleep関数実行
  • Promiseを実行
    • rejectがない場合は省略可能。
    • 1秒後に引数valを受け取ったresolveを実行
    • 引数valをインクリメントしコンソールに出力
  • thenのreturnにさらにsleepを実行することで連続してsleep関数を実行することができる。

function sleep(val) {
  return new Promise(function(resolve){
    setTimeout(function(){
      console.log(val++);
      resolve(val);
    }, 1000);
  });
}

sleep(0).then((val) =>{ return sleep(val)})
.then((val) =>{ return sleep(val)})
.then((val) =>{ return sleep(val)})
.then((val) =>{ return sleep(val)})
.then((val) =>{ return sleep(val)})

>>> 0
>>> 1
>>> 2
>>> 3
>>> 4

Promise.all()

• Promise.all() メソッドは入力としてプロミスの集合の反復可能オブジェクトを取り、入力したプロミスの集合の結果の配列に解決される単一の Promise を返します。
• 引数は反復可能オブジェクト、例えばarrayなど。

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 100);
});

Promise.all([p1, p2, p3]).then(values => {
  console.log(values); // [3, 1337, "foo"]
});