Promise

Promiseを使うときに、通常にnewしてから使います。

つまり、Promiseはコンストラクターです。では、console.dir(Promise)でPromiseの中身を見てみましょう！

　Promiseの中にある、resolve, reject, catch, thenメソッドについてまだ分からないと思いますが、順を追って説明いたします。
◉また余談ですが、Promiseは英語で約束の意味があります。一定時間後に必ず結果（result)を返してくるねという風に覚えてればいいと思います。

まずPromiseの重要な属性、3つの状態から説明いたします。

とても大事な内容となるので、ぜひ理解してください。

let a1 = new Promise((resolve)=>{
  setTimeout(()=>{
    resolve(1)
  },2000);
})

console.log(a1);

consoleから確認できるように、２秒後Promiseの状態（PromiseState属性)がpendingからfullfilledに変わりました。

pending, fullfilled, rejectedはそれぞれ下記の意味を表しています。
● pending: 初期状態
● fullfilled: 処理が成功しました
● rejected: 処理が失敗しました

次に、Promise関数定義の仕方を見ていきましょう。
１のアロー関数の書き方が現在主流になっています。

Promiseの関数定義

// 書き方1
let a1 = new Promise((resolve, reject)=>{

})

// 書き方2
let a2 = new Promise(function(resolve, reject){

})

　resolveとrejectメソッドは引数となります。他の名前にすることもできますが、一般的にそのままresolveとrejectを使うのが普通です。また他のプログラミング言語では、funciton(メソッド）を引数として渡せない場合が多いですが、javascriptができます。これもjavasript言語の魅力の一つです！

そのために、functionブロックにあるresolve(1)とはresloveメソッドに引数１を渡す意味となります。そして、もう一点覚えてほしいことは、Promiseの状態が一旦変われば、再度変更されることはありません。

例えば、pendingからfullfilledにchangeしたら、またrejectの状態に遷移することはありません。
下記の関数では、resolveメソッドが実行されると、rejectメソッドは実行しません。
resove, reject両者の中で一つのみしか実行されません。

let a1 = new Promise((resolve, reject)=>{
  resolve();
  reject();  // 実行されません
})

console.log(a1);

下記関数の実行結果を見てみましょう。

let a1 = new Promise((resolve, reject)=>{
  resolve(1);
  reject();
})

console.log(a1);

結果から分かるように、PromiseResultの結果は１です。では、どのようにすればPromiseResultの値を取得することができるのでしょうか。
答えはthenメソッドとcatchメソッドを使うことです。thenとcatch二つともcallback関数です。
● resolve関数の処理が成功されると、PromiseResultがthenメソッドに渡されます。
● reject関数の処理が成功されると、PromiseResultがcatchメソッドに渡されます。

new Promise((resolve,reject)=>{
  resolve(123)
}).then(res=>console.log(res + '成功したら実行される'))
  .catch(error=>console.log(err + '失敗したら実行される'))
  .finally(()=>console.log('成功や失敗のどちらでも実行される'));

また、catchを省略し、下記のように書くこともできます。then関数に二つの引数を渡すという書き方です。

new Promise((resolve,reject)=>{
  reject(123)
}).then((res)=>console.log(res + '成功'),
        (err)=>console.log(err + '失敗'));

catch, then, resolve, rejectについて紹介はここまでにしたいと思います。次にPromise chainの概念について書きます。
まず前提として分かってほしいのは.then関数が処理された後の戻り値は新しいPromise対象です。

let a1 = new Promise((resolve,reject)=>{
  resolve('123')
});

let a2 = a1.then((res)=>{}); 

console.log(a2);  //undfined
console.log(a1 === a2);  // false

処理結果はこんな感じです！

a1.thenの処理結果はundefinedなのに、なんでPromiseStateはfullfilledと疑問に思う方はいると思いますが、原因としては、reject関数が呼ばれていないため、PromiseStateはrejectに変更しません。resove関数について、例え結果はundefinedでもPromiseStateはfullfilledです。

例えば、下記の例だとPromiseStateはrejectになります。

let a1 = new Promise((resolve,reject)=>{
  resolve('123')
});

let a2 = a1.then(()=>{  
    let a3 = new Promise((resolve,reject)=>{
      reject()
    })
    return a3
})

console.log(a2);

処理結果：

では、Promise chainの使い方を見ていきましょう。

let a1 = new Promise((resolve, reject)=>{
  resolve(1)
})
let a2 = a1.then((res)=>{
  console.log(res); //1
  return 2
})
let a3 = a2.then((res)=>{
  console.log(res); //2
  return 3
})
let a4 = a3.then((res)=>{
  console.log(res); //3
})

もちろん変数名を省略することもできます。

let a1 = new Promise((resolve, reject)=>{
  resolve(1)
}).then((res)=>{
  console.log(res); //1
  return 2
}).then((res)=>{
  console.log(res); //2
  return 3
}).then((res)=>{
  console.log(res); //3
})

では、Promiseを使うことで、実際にどんな問題が解決できるのでしょうか。
はい、答えはcallbackの無限ループ問題を解決できます。
下記のコードを見ていきましょう。

function fn(a){
  setTimeout(()=>{
    console.log(a);
    a--;
    setTimeout(()=>{
      console.log(a);
      a--;
      setTimeout(()=>{
        console.log(a);
        a--;
        setTimeout(()=>{
          console.log(a);
          a--;
          setTimeout(()=>{
            console.log(a);
            a--;
          },1000)
        },1000)
      },1000)
    },1000)
  },1000)
}

fn(6);

コードから分かるように、毎回前回処理結果の値を使って新規の処理を行いますが、ソードコードがとても読みづらく、保守性も低いです。
Promiseを使えば、ソースコードは下記に変身できます！

function fn(a) {
    new Promise((resolve,reject) =>{
      resolve(a)
    })
    .then((params)=>{
    return new Promise((resolve, reject)=>{
      setTimeout(()=>{console.log(params); resolve(--params)},1000)})
    })  
    .then((params)=>{
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{console.log(params); resolve(--params)},1000)})
    })    
    .then((params)=>{
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{console.log(params); resolve(--params)},1000)})
    })    
    .then((params)=>{
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{console.log(params); resolve(--params)},1000)})
    })    
    .then((params)=>{
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{console.log(params); resolve(--params)},1000)})
    })
  }

fn(6)

はい、Promiseを利用すればソースコードの可読性がだいぶ向上しましたね！