(Promise)(JS) 約束の仕方が間違っていた

自分の昨日まで．

Promiseは非同期処理を同期的に処理できるパターンなのだと思っていた．

それは正しくもあるが，完璧にそうではなかった，，，というより，同期的に処理するパターンをよく理解できていなかったのでハマった．

結果的に解決したので良かった．

まあ，その，要は，Promise本をさらっと読んだだけで，まだやったことなかったので理解が十分でなかったのが原因です．

こんな風に出力したかったです．

1. file1.txtの内容
2. file2.txtの内容
3. Completed!!!

もともとの間違った出力はこうでした．

1. Completed!!!
2. file2.txtの内容
3. file1.txtの内容

※ここでfile1.txtとfile2.txtの順は定かではないです．file1.txtはとても大きいサイズのファイルです．

同期的に処理するパターンのコード例

function startPromise() {

    Promise.resolve()
    .then(function (ret) {
      return promiseAjax('file1.txt');
    })
    .then(function (ret) {
      console.log(ret);
      return promiseAjax('file2.txt');
    })
    .then(function (ret) {
      console.log(ret);
      return;
    })
    .catch(function (e) {
      console.log(err);
      return;
    })
    .then(function (ret) {
      console.log('Completed!!!');
      return;
    });
}

function promiseAjax(fileName) {
  return new Promise(function (resolve) {
    var req = new XMLHttpRequest();
    req.open('GET', '/' + fileName, true);
    req.onload = function () {
      if (req.status === 200) {
        resolve(req.responseText);
      } else {
        reject(new Error(req.statusText));
      }
    };
    req.onerror = function () {
      return reject(new Error(req.statusText));
    };
    req.send();
  });
}

どこにハマっていたかというと，thenのなかで

• return promiseAjax('...');

とすべきところを，

• promiseAjax('...');

としていたところでした．

非同期処理は難しい？

いいえ， というより僕の頭のパラダイムシフトを進めなければなりません． 今後のプログラミングスタイルのスタンダードがそうなるからです．

追記：コールバックは難しい？

いいえ， やはり，僕の頭のパラダイムシフトを進めなければなりません． 今後のプログラミングスタイルのスタンダードがそうなるからです．