JavaScript入門 非同期処理 await/async Fetchの解説

非同期関数の宣言
async function 関数名() {・・・};

無名関数やアロー関数の先頭にも付与できる
someFunction( async () => {・・・} );

オブジェクトやクラスのメソッドにも付与できる
class MyClass {
    async method() { … }
}
const obj = { method: async function() { … } }

async function asyncFunction(){
    return "hello";
}

asyncFunction().then( (returnVal) => { console.log( returnVal ) } ); 
//非同期関数の実行結果はPromiseになるためthenメソッドを呼び出すことが可能

async function 関数名() {
    let  resolvedValue = await prom;
}

const prom = new Promise( resolve => {
    setTimeout( () => resolve( "この値を取り出します。" ), 1000)
});

async function asyncFunction() {
    const value = await prom;   //resolveの実引数の値がvalueに代入される。また、次行の処理はPromiseオブジェクト(prom)のステータスがfulfilledになるまで待機する
    console.log( value );
}}
asyncFunction();
>この値を取り出します。

async function throwError(){
    try {
        await Promise.reject( "Promiseが失敗しました。" );
    } catch( error ){
        console.log( error );
    }
}
throwError();
>Promiseが失敗しました。

function promiseFactory(count) {    //※1 この関数はawait/asyncで書き換えることはできない
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            count++;
            console.log(`${count}回目のコールです。時刻：[${new Date().toTimeString()}]`);
            if( count === 3 ) {     //3回目のコールでエラー
                reject(count);
            } else {
                resolve(count);
            }
        }, 1000);
    });
}

/* このコードをexecute()で書き換える
promiseFactory( 0 )
  .then( count => { return promiseFactory( count ); } )
  .then( count => { return promiseFactory( count ); } )
  .then( count => { return promiseFactory( count ); } )
  .catch( errorCount => { 
      console.log(`エラーに飛びました。現在のカウントは${errorCount}です。`);
}).finally(() => {
    console.log( "処理を終了します。" );
});
*/

//await/asyncを使った書き換え
async function execute(){    //※2 awaitを内部で使って言うためasyncを付ける
    try {

        // PromiseFactory内のresolveが呼び出されるまで次の処理を実行しない  ※3
        let count = await promiseFactory( 0 );  //※4 awaitによってresolveの引数の値がcountに代入される
        count = await promiseFactory( count );
        count = await promiseFactory( count );
        count = await promiseFactory( count );
     } catch ( errorCount ) {
         console.error(`エラーに飛びました。現在のカウントは${ errorCount }です。`); //※5 Promiseがrejectedのステータスになった場合はcatchブロックに遷移する 
     } finally {
         console.log( "処理を終了します。" );
     }
}

execute();   //execute()の実行

async function fn(){
    await execute();  
    //executeは非同期関数なので、Promiseを返す。後続の処理は、execute()の実行が完了するまで待機する
}
fn();

fetch( "リクエストURL" [, data] )
    .then( response => response.json() )
    .then( data => { 取得したJSONを使って処理を行うコード } );

<script>
    fetch( "sample.json" )  //同じフォルダ内のsample.jsonを相対パスで指定
        .then( response => response.json() )
        .then( data => {
            for( const { key, value } of data ){
                console.log( key + ":" + value );
            }
        } );
   /* await / asyncを使うと以下のように記述できる
   async function myFetch(){
       const response ~ await fetch( "sample.json" );
       const data = await response.json();    //jsonメソッドもPromiseを返す
       for( const { key, value } of data ){
                console.log( key + ":" + value );
       }
   }
   myFetch();
   */
</script>

[
     {"key": "apple", "value": "リンゴ"},
     {"key": "orange", "value": "オレンジ"},
     {"key": "melon", "value": "メロン"},
]

>apple:リンゴ
>orange:オレンジ
>melon:メロン