【JavaScript】 非同期はPromise？解説が難しいので自分で理解してみた

50%の確率で成功する関数

function a( resolve , reject ){
      let per = Math.floor( Math.random() * 100 );
      (per >= 50 ) ? resolve(per) : reject(per);
}

Promiseオブジェクト作成例

//50%の確率で成功する関数
function a( resolve , reject ){
    let per = Math.floor( Math.random() * 100 );
    (per >= 50 ) ? resolve(per) : reject(per);
}
const prm = new Promise( a );

Promiseオブジェクト作成例２

const prm = new Promise(
    function ( resolve , reject ){
        let per = Math.floor( Math.random() * 100 );
        (per >= 50 ) ? resolve(per) : reject(per);
   }
);

Promiseオブジェクト作成例３

const prm = new Promise(
   ( resolve , reject ) => {
        let per = Math.floor( Math.random() * 100 );
        (per >= 50 ) ? resolve(per) : reject(per);
   }
);

Promiseオブジェクト作成例４

function func1( kakuritu ) {
   return new Promise( // Promiseを返す
      ( resolve , reject ) => {
           let per = Math.floor( Math.random() * 100 );
           (per >= kakuritu ) ? resolve(per) : reject(per);
      }
   );
};

const prm = func1( 30 ); // 30%でPromiseオブジェクトを作成

Promise.prototype.then使用例

function a( resolve , reject ){
    let per = Math.floor( Math.random() * 100 );
    (per >= 50 ) ? resolve(per) : reject(per); // (1)
}
function resolve_func( p ){ console.log( "勝ち:" + p ); } // 勝ちコールバック関数
function reject_func( p ){ console.log( "負け:" + p ); } // 負けコールバック関数

new Promise( a ).then( resolve_func , reject_func );

function a( resolve , reject ){
    throw new Error("eror!"); // 例外をスロー
}

new Promise(a)
            .then( ()=>{} , e=>console.log("error:" , e) ); // error:Error: "eror!"!

function a( resolve , reject ){
    throw new Error("eror!"); // 強制的に例外を発生
}

new Promise(a)
            .then( ()=>{} ) // 失敗時の関数が登録されていない
            .catch(// こちらが呼び出される
                e=>console.log("catch:" , e) // catch: Error: "eror!"
            );

function a( resolve , reject ){
    let per = Math.floor( Math.random() * 100 );
    return (per >= 50 ) ? resolve(per) : reject(per);
}

new Promise(a)
        .then( e => console.log("あなたの勝ち") )
        .catch( e => console.log("あなたの負け") )
        .finally( () => console.log("勝負終了") );

function a( resolve , reject ){
    let per = Math.floor( Math.random() * 100 );
    return (per >= 50 ) ? resolve(per) : reject(per);
}
new Promise(a)
        .finally( () => console.log("勝負終了") )
        .then( e => console.log("あなたは勝ちました(" + e + ")" ) )
        .catch( e => console.log("あなたは負けました(" + e + ")") );

function a( resolve , reject ){
    let per = Math.floor( Math.random() * 100 );
    return (per >= 50 ) ? resolve(per) : reject(per);
}

new Promise(a)
        .then( e => console.log("あなたは勝ちました(" + e + ")" ) )
        .catch( e => console.log("あなたは負けました(" + e + ")") )
        .finally( () => console.log("勝負終了") )
        .then( e => console.log("あなたは勝ちました(" + e + ")" ) )
        .catch( e => console.log("あなたは負けました(" + e + ")") );

Promiseで渡された関数のタイミング確認

console.log( "(1)start" , tim( ));

new Promise( function () {
            console.log( "(2)Promise start" , tim( ));
            setTimeout(()=>{
                console.log( "(4)Wait end" , tim( ));
            }, 3000)
        });

console.log( "(3)end" , tim( ));

現在の時刻を表示

const tim = () =>{const d = new Date;return d.getHours().toString() + ':' + d.getMinutes().toString() + ':'+ d.getSeconds().toString()+ ':'+ d.getMilliseconds().toString();};

console.log( "start" , tim( ));
const a = new Promise( function ( resolve ) {
            setTimeout(()=>{ // 3秒後にresolve()を呼び出す
                console.log( "call resolve()" , tim( ));
                resolve(1);
            }, 3000);
        });

setTimeout(()=>{ // 6秒後に resolve()で呼び出すコールバックセット
            console.log( "set .then" , tim( ));
                 // thenを登録
            a.then( e => console.log("success:" + e),
                e => console.log("error:" + e));
        }, 6000);

console.log("Start");

new Promise(   resolve  => {
                    setTimeout( ()=> {
                       console.log("Wait End");
                       resolve(1);
                      }, 3000 );
                 })
         .then( () => console.log("Call Then"));

console.log("End");

console.log("Start");
new Promise( resolve => {

            const st = new Date().getTime();
            while( new Date().getTime() - st < 3000  ) { }

            console.log("Wait End");
            resolve(1);
        }).then( () => console.log("Call Then"));

console.log("End");

new  Promise( 関数P ).then(関数).then(関数)　…

Promiseチェーンの例

function promiseNew( e ) {
        return new Promise( ( resolve,reject  ) => {
            confirm(e) ? resolve(1) : reject(1);
        });
    }
promiseNew("お腹がすきましたか？")
        .then( e =>  promiseNew("パスタでいいですか？"),
                e =>  promiseNew("スイーツを食べましょう！"))
        .then( e =>  alert("では行きましょう！"),
            e =>  alert("明日にしよう..."));

new Promise( ( resolve  ) => resolve(1) )
        .then( e => {console.log("then1:",e ); return 2; })
        .then( e => {console.log("then2:",e ); return 3; } )
        .then( e => console.log("then3:",e ) );

new Promise( ( resolve  ) => resolve(1) )
        .then( e => console.log( "then1:" ,e ) )
        .then( e => console.log( "then2:" ,e ) )
        .then( e => console.log( "then3:" ,e ) );

new Promise( ( resolve  ) => resolve(1) )
        .then( e => {
            console.log("then1:",e );
            throw new Error("then1Error"); // (1)
        })
        .then( e => {console.log("then2:",e );return 3;} ,
            e => console.log("error:",e.message ) // (1)を捕捉
        )
        .then( e => console.log("then3:",e ) );

new Promise( ( resolve  ) => resolve(1) )
        .then( e => {
            console.log("then1:",e );
            throw new Error("then1Error");
        })
        .then( e => {console.log("then2:",e );return 3;})
        .then( e => {console.log("then3:",e );return 4;} )
        .catch(e => console.log("catch:",e.message ))
        .then( e => {console.log("then4:",e );return 5;});