JavaScript promiseの使い方 非同期処理

多分、すでに同じことが書かれている記事はたくさんあると思いますが、自分自身への忘備録と、JavaScriptスーパー初心者（＝自分自身）もわかるようにと細かいところまで注釈つけた記事として、投稿してみます。

はじめに

非同期処理を簡単に表現するオブジェクト
-Promise-
JavaScriptで非同期処理を実施する場合、もともと
XMLHttpRequest*1オブジェクトを使う際、Callback関数が多数利用されていますした。
しかし非同期処理がいくつも重なる場合、Callback関数 では入れ子( = nest)がふかくなりすぎて、
１つの関数が肥大化する傾向にあります。
このような問題をコールバック地獄 = CallbackHellといいます。これを解決すべく様々なフレームワークではPromiseライクなものが導入されてきました。
ついにはES2015で標準化される流れとなりました。
[参考]
http://callbackhell.com/

*1 XMLHttpRequest オブジェクト 1つのページ内で遷移せず外部からのデータを読み込む際に重宝されている関数です。

Promiseの基本動作

Promiseのサンプルは次の通りです。
下のコード内の以下のメソッドは、Promise内でつかわれるお約束的なものです。

resolve = 通常時の実処理
reject = 　例外時の処理
後々thenで受け取って[その時]使うことができます。

var promise = new Promise(function(resolve, reject) {
  // do a thing, possibly async, then…
　　//ここで何かの処理を行う。
  if (/* 全てが順調 */) {
    resolve("よしっ!");
  }
  else {
    reject(Error("orz"));
  }
});

https://developers.google.com/web/fundamentals/primers/promises?hl=ja#whats-all-the-fuss-about から引用参考。

function task1() {
    return new Promise(function (resolve, reject) {
        setTimeout(function() {
            console.log('task1');
            resolve('task1');
        }, 3000);
    });
}
task1();

setTimeout は第２引数で指定した数字のミリ秒後に処理を実施する関数　taskが行われるのは3000ミリ秒＝３秒後

function asyncProcess(value) {
    return new Promise((resolve, reject) => {
        setTimeout(() => { 
            if (value) {
                resolve(`value: ${value}`);
            } else { reject('empty');}
        }, 5000)
    });
}

asyncProcess('Wawa').then(
    response => {
        console.log(response);
    }, error => {
        console.log(`Error:${error}`);
    }
);

//結果 = value :Wawa

https://qiita.com/hikarut/items/6c236b6d6ff6ec10cd7a から引用

↑asyncProcessは　Promiseオブジェクトを返しています。
Promiseの引数としてresolve/rejectをおいている、呼び出し側では、thenを使っての結果を受け取っている。

Promiseコンストラクタ

new Promise((resolve,reject)) => {statement})
resolve:処理の成功を通知
reject :処理の失敗を通知
statements : 処理本体

thenメソッド

promise.then(success,failure)
promise:promise オブジェクト
success:成功時よびだされるメソッド(resolve関数によって呼び出される)
failure:失敗時よびだされるメソッド(reject関数によって呼び出される)

aysnc と awaitについて

asyncとawaitはそれぞれ、Promiseをオブジェクトとして返すメソッドを簡略して書きたいときに使う修飾子です。

上記のtaskメソッドであれば　下記のように簡略化可能です。

async function task1() {
    return  { setTimeout(function() {
            console.log('task1');
            resolve('task1');
        }, 3000);
    });
}

まとめ

非同期処理はCallBackだらけになる。
CallBackだらけのコードを避けるべく登場したのがPromiseで直線的に非同期処理をさばける。
PromiseはES2015で標準装備となった。
Promiseはオブジェクトは、非同期処理を監視するオブジェクト
コンストラクタ　resolve と rejectを引数にもつ関数をもつ。それぞれ引数をthenで受け取る。