Promiseの使い方

javascriptで非同期処理を順番通りに行う場合は、promiseを使うと分かりやすいです。

main.js

//本来やりたいことの一例

//表示
showMessage("処理1開始");  

//処理1
for(int i=0;i<99;i++){

  showMessage("処理中 " + i);  //表示が更新されない

  shori_1(i);
}

//表示
showMessage("処理2開始");  

//処理2
for(int i=0;i<99;i++){

  showMessage("処理中 " + i);  //表示が更新されない

  shori_2(i);
}

上記のサンプルで動作してくれれば問題ないのですが、表示は更新されません。
そこで、下記の様に処理と表示の処理をそれぞれ独立して（非同期で）処理します。
因みに並列処理ではありません（javascriptでは、非同期処理≠並列処理です）。

まとめて書く

まとめて書くとこの様な感じ。
このままでは使用できません（意図した動作になりません）。

main.js

var promise =    new Promise((resolve, reject) => { console.log("shori1") })
.then((value) => new Promise((resolve, reject) => { console.log("shori2") }))
.then((value) => new Promise((resolve, reject) => { console.log("shori3") }))
.then((value) => new Promise((resolve, reject) => { console.log("shori4") }))
.then((value) => new Promise((resolve, reject) => { console.log("shori5") }))
.then((value) => { console.log("shori6") })
.catch((error) => { console.log("shoriError") });

値の受け渡し

値の受け渡しは、この様に行います。
rejectすると、直接catchに飛びます。
このままでは使用できません（意図した動作になりません）。

main.js

var promise = new Promise((resolve, reject) => {

    resolve("para1");
    //reject("error1");

}).then((value) => new Promise((resolve, reject) => { 

    console.log(value);

    resolve("para2");
    //reject("error2");

})).then((value) => new Promise((resolve, reject) => { 

    console.log(value);

    resolve("para3");
    //reject("error3");

})).then((value) => new Promise((resolve, reject) => {

    console.log(value);

    resolve("para4");
    //reject("error4");

})).then((value) => new Promise((resolve, reject) => {

    console.log(value);

    resolve("para5");
    //reject("error5");

})).then((value) => {

    console.log(value);

    //resolve("para6");
    //reject("error6");

}).catch((error) => {

 console.log("error")

});

非同期処理を順番に行う（繰り返し処理なし）

実際に非同期処理を順番に行う場合は、下記の様に書きます。
※setTimeoutを追記します。
良く分からんけど。非同期処理の中に非同期処理を書く感じなのか。
alertやconfirmなどと文字表示などを組み合わせたい時などに使用できます。

main.js

var promise = new Promise((resolve, reject) => {

  window.setTimeout(() => {
    console.log("処理");
    resolve("para");
    //reject("error");
  }, 10)  //1-10?

}).then((value) => new Promise((resolve, reject) => { 

  console.log(value);

  window.setTimeout(() => {
    console.log("処理");
    resolve("para");
    //reject("error");
  }, 10)  //1-10?

})).then((value) => new Promise((resolve, reject) => { 

  console.log(value);

  window.setTimeout(() => {
    console.log("処理");
    resolve("para");
    //reject("error");
  }, 10)  //1-10?

})).then((value) => new Promise((resolve, reject) => {

  console.log(value);

  window.setTimeout(() => {
    console.log("処理");
    resolve("para");
    //reject("error");
  }, 10)  //1-10?

})).then((value) => new Promise((resolve, reject) => {

  console.log(value);

  window.setTimeout(() => {
    console.log("処理");
    resolve("para");
    //reject("error");
  }, 10)  //1-10?

})).then((value) => {

  console.log(value);

  window.setTimeout(() => {
    console.log("処理");
    resolve("para");
    //reject("error");
  }, 10)  //1-10?

}).catch((error) => {

 console.log("error")

});

非同期処理を順番に行う（繰り返し処理あり）

繰り返し処理で非同期処理を順番に行う場合は、下記の様に書きます。
※whileで囲んでやります。

main.js

var promise = new Promise((resolve, reject) => {

  var n = 0;

  while(true){
    window.setTimeout(() => {
      console.log("処理 " + n);
      if(n==99){
        resolve("para" + n);
        //reject("error" + n);
        break;
      }
      n++;
    }, 10)  //1-10?
  }

}).then((value) => new Promise((resolve, reject) => { 

  console.log(value);

  var n = 0;

  while(true){
    window.setTimeout(() => {
      console.log("処理 " + n);
      if(n==99){
        resolve("para" + n);
        //reject("error" + n);
        break;
      }
      n++;
    }, 10)  //1-10?
  }

})).then((value) => new Promise((resolve, reject) => { 

  console.log(value);

  var n = 0;

  while(true){
    window.setTimeout(() => {
      console.log("処理 " + n);
      if(n==99){
        resolve("para" + n);
        //reject("error" + n);
        break;
      }
      n++;
    }, 10)  //1-10?
  }

})).then((value) => new Promise((resolve, reject) => {

  console.log(value);


  var n = 0;

  while(true){
    window.setTimeout(() => {
      console.log("処理 " + n);
      if(n==99){
        resolve("para" + n);
        //reject("error" + n);
        break;
      }
      n++;
    }, 10)  //1-10?
  }

})).then((value) => new Promise((resolve, reject) => {

  console.log(value);

  var n = 0;

  while(true){
    window.setTimeout(() => {
      console.log("処理 " + n);
      if(n==99){
        resolve("para" + n);
        //reject("error" + n);
        break;
      }
      n++;
    }, 10)  //1-10?
  }

})).then((value) => {

  console.log(value);

  var n = 0;

  while(true){
    window.setTimeout(() => {
      console.log("処理 " + n);
      if(n==99){
        //resolve("para" + n);
        //reject("error" + n);
        break;
      }
      n++;
    }, 10)  //1-10?
  }

}).catch((error) => {

 console.log("error")

});