javascriptのpromiseでチェーン処理

Question

javasciptのpromiseでチェーン処理を行いたいのですが、順番通りになりませんでした。

　・処理１（setTimeoutループ）
・処理２（setTimeoutループ）
・処理３（end）

の順番に処理をしたいのですが、処理２と処理３の順番が入れ替わりました。

仕様なのでしょうか。
promiseの中にpromiseを書いても良いのですが、それだとチェーンの意味が無い様な。

///////////////////////////////////////////////////
//
//  onLoad
//
///////////////////////////////////////////////////
$(window).on('load',function(){

    ///////////////////////////////////////////
    //
    //  処理1
    //
    ///////////////////////////////////////////
    var promise = new Promise(function(resolve, reject) {

      //リクエスト配列
      var aryRequest = [];

      //データ数
      var numData = 0;

      //データ
      var aryData = ["data1", "data2", "data3", "data4", "data5"];

      //データループ
      aryData.forEach(function(data) {

      //
      window.setTimeout(() =>{

        //表示
        console.log("shori1 " + numData + " " + data);

        //登録
        aryRequest.push("reqest_" + data);

        //更新
        numData++;

        //終了
        if(numData == aryData.length){
          resolve(aryRequest);
          return false;  //break;
        }

      }, 1);
      });

    });


    ///////////////////////////////////////////
    //
    //  処理2
    //
    ///////////////////////////////////////////
    promise.then(function(value) {

      //リクエスト
      var aryRequest = value;

      //リクエスト数
      var numRequest = 0;

      //リクエストループ
      aryRequest.forEach(function(request) {

      //
      window.setTimeout(() =>{

        //処理
        console.log("shori2 " + numRequest + " " + aryRequest[numRequest]);

        //更新
        numRequest++;

        //終了
        if(numRequest == aryRequest.length){
          return false;  //break;
        }

      }, 1);
      });

      return true;

    }).then(function(value) {

      //表示
      console.log("end");

    //プロセスエラー
    }).catch(function (error) {

      //表示
      console.log("error");

    });


});

処理結果

shori1 0 data1
shori1 1 data2
shori1 2 data3
shori1 3 data4
shori1 4 data5
end
shori2 0 reqest_data1
shori2 1 reqest_data2
shori2 2 reqest_data3
shori2 3 reqest_data4
shori2 4 reqest_data5

　endが先に来る。

Answer 1

then()...then()とつながるところが、Promiseオブジェクトを返していないので、待たずにendまで直行してしまいます。
以下のようにPromiseオブジェクトを返せば問題ありません。（めんどくさいでfunctionではなくes6のallow記述で関数をかいてます）

    promise.then(function(value) {
        var aryRequest = value;
        var numRequest = 0;
        return new Promise((resolve, reject) => {
            aryRequest.forEach(() => {
                window.setTimeout(() => {
                    console.log("shori2 " + numRequest + " " + aryRequest[numRequest]);
                    numRequest++;
                    if (numRequest === aryRequest.length) {
                        return resolve();
                    }
                }, 1);
            });
        });
    }).then(function (value) {
        console.log("end");
    })

Comments

[maisumakun]

arrowで書くときは、「.then(value => new Promise((resolve, reject) => {」のように始めれば、必要以上にネストが深くなるのも避けられます。

[sagami1991]

たしカニ

[uer03108]

有難うございました。
試してみます。
N個の非同期処理を順番に行う場合は、promiseもN個になってネストが1段ずつ深くなるという理解で宜しいでしょうか。

[sagami1991]

いえ、ちがいます
こんな感じになってネストは別に深くなりません
var promise = new Promise(...処理1);
promise.then(() => new Promise(...処理2))
.then(() => new Promise(..処理3))
.then(() => new Promise(..処理4))
.then(() => new Promise(...処理5))

[uer03108]

有難うございました。

[uer03108]

setTimeoutを使うと表示が上手くいきませんでした。
setIntervalで対応いたしました。

[sagami1991]

setIntervalはn秒間隔である関数を実行するのでまた異なる意味合いになってしまいます

[uer03108]

確かに、仰る通りですね。

Answer 2

Promise.prototype.then(関数1).then(関数2)で、関数2の実行のタイミングは、関数1の返り値に依存します。

• 関数1がPromiseを返した場合…このPromiseがresolvedとなった段階で関数2が実行される
• それ以外の場合…関数2は、関数1の実行直後に実行される

ということで、非同期処理を連鎖させたい場合には、「promiseの中にpromiseを書」くしかない「仕様」です。

Comments

[uer03108]

理解致しました。
return value;
が呼ばれた時点で次の関数が実行ですね。