【JavaScript】非同期処理④ Promiseチェーン

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

• 非同期処理についての理解を深める

#本題
###1.Promiseチェーン

PromiseチェーンとはPromiseを使って非同期処理を順次実行すること。

####例1

Promiseを使って可読性を上げる

function sleep(callback, val) {
  setTimeout(function() {
    console.log(val++);
    callback(val);
  }, 1000);
}

これをPromiseチェーンを使って書くと以下の通りとなる

function sleep(val) {
  // sleepに値が返却されるようにreturnを使う
  // Promiseの中でsetTimeoutを使う
  return new Promise(function(resolve){
    setTimeout(function() {
      console.log(val++);
      resolve(val);
    }, 1000);
  });
}

// sleepのvalを実行
// sleepにresolveの値が入っているのでthenメソッドを使ってコールバック関数を追加
sleep(0).then(function(val){
  //Promiseのチェーンを繋げる
  // Promiseのインスタンスを使ってPromiseをチェーンする
  // 1秒ごとに1,2,と出力される
  return sleep(val);
}).then(function(val){
  return sleep(val);
}).then(function(val){
  return sleep(val);
}).then(function(val){
  return sleep(val);
})

今日はここまで！

#参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム
• Let'sプログラミング JavaScript入門