【JavaScript】async/await で非同期処理 (async/await使ってPromiseを簡単にする)

// 1. async で「非同期関数」を定義する => 必ずPromiseを返します。
const AsyncRobotama = async () => {
    return 'AsyncRobotama';
}

// 2. return new Promise((resolve, reject) => { ・・・} ) を省略できる！

// 3. 非同期関数 (async関数)の実行結果(返り値)は Promise なので、thenメソッドが使える！
AsyncRobotama()
    .then( result => {
        console.log(result);
    });

// [ 実行結果 ]
// AsyncRobotama
// Promise {<fulfilled>: undefined}
    // [[Prototype]]: Promise
    // [[PromiseState]] : "fulfilled"
    // [[PromiseResult]]: undefined

// もちろん、async関数で今まで通りの方法でPromiseを返すこともできます。

const AsyncRobotama2 = async () => {
    return new Promise((resolve, reject) => {
      resolve('AsyncRobotama2');
    });
  }

AsyncRobotama2().then(result => {
    console.log(result);
});

// [ 実行結果 ]
// AsyncRobotama2
// Promise {<fulfilled>: undefined}
    // [[Prototype]]: Promise
    // [[PromiseState]] : "fulfilled"
    // [[PromiseResult]]: undefined

// 1. async で「非同期関数」を定義する => 必ずPromiseを返します。
const AsyncRobotama3 = async () => {
    return 'AsyncRobotama3';
}

const DevlopRobotama = async () => {

    // 2. await は必ず、async関数の内部で使います！
    const result = await AsyncRobotama3();
    console.log(result);
}

DevlopRobotama();

// [ 実行結果 ]
// AsyncRobotama3
// Promise {<fulfilled>: undefined}
    // [[Prototype]]: Promise
    // [[PromiseState]] : "fulfilled"
    // [[PromiseResult]]: undefined

// 1. 非同期処理をする関数
const PromiseCalc = (num) => {
    return new Promise((resolve) => {

        setTimeout(()=> { resolve(num * num) }, 2000);
    });
};


// 2. 従来のthen() メソッドチェーン
PromiseCalc(10)
.then((data)=> {
 
    console.log(data);
    return PromiseCalc(100);
})
.then((data)=> {
 
    console.log(data);
    return PromiseCalc(1000);
})
.then((data)=> {
    console.log(data);
});


// 3. async/await による thenメソッドチェーンの省略
const AsyncAll = async () => {
  
    console.log(await PromiseCalc(10));
    console.log(await PromiseCalc(100));
    console.log(await PromiseCalc(1000));
}
 
AsyncAll();


// [ 実行結果 ]
// Promise {<fulfilled>: undefined}
    // [[Prototype]]: Promise
    // [[PromiseState]] : "fulfilled"
    // [[PromiseResult]]: undefined
// 100
// 100
// 10000
// 10000
// 1000000
// 1000000

// 複数のPromiseを並列で走らせるときに、awaitは使いやすい

// 1. 非同期処理をする関数
const LateSeconds = (x) => {
    return new Promise(resolve => {
        setTimeout(() => {
        resolve(x);
        }, x * 1000);
    });
}

// 2-1. async関数 Ver.1
const LateCompany = async () => {
    let a = LateSeconds(1); // ここで1秒待つ
    let b = LateSeconds(2); // ここで2秒待つ
    return `${await a + await b}秒会社に遅刻しました！`; // 1秒待つのと2秒待つのが並行で行われる
}

// 2-2. then() でも取り出せます
LateCompany().then(v => {
    console.log(v);
});

// [ 実行結果 ]
// 3秒会社に遅刻しました！


// 3-1. async関数 Ver.2
const LateCompany2 = async (x) => {
    let a = await LateSeconds(2); // ここで2秒待つ
    let b = await LateSeconds(3); // さらに3秒待つ
    return `${await a + await b}秒会社に遅刻しました！`; // 2秒待つのと3秒待つのが並行で行われる
}

// 3-2. await でも取り出せます
console.log(await LateCompany2());

// [ 実行結果 ]
// 5秒会社に遅刻しました！

// 1. 非同期処理をする関数
const PromiseCalc = (num) => {
    return new Promise((resolve) => {

        setTimeout(()=> { resolve(num * num) }, 2000);
    });
};

// [ Promise.all() と async/await を使った並列処理の比較 ]

// 2. Promise.all() を使った並列処理

// 2-1. Promise.all() では、PromiseCalc() の引数違いを3つ同時に実行しています。
Promise.all([
    PromiseCalc(10),
    PromiseCalc(100),
    PromiseCalc(1000)
])
.then((data) => {
    // 2-2. 最後に「then」で実行結果を配列として出力します。
    console.log(data);
});

// [ 実行結果 ]
// (3) [100, 10000, 1000000]


// 3. async/await を使った並列処理
const AsyncAllFunc = async () => {
    
    // 3-1. まず最初に、実行予定のPromise処理をすべて起動させて変数に格納します。
    const promise1 = PromiseCalc(10);
    const promise2 = PromiseCalc(100);
    const promise3 = PromiseCalc(1000);
 
    // 3-2.「await」を付与することですべてのPromise処理を並列に動かして結果を取得できる。
    console.log([await promise1, await promise2, await promise3 ]);
};
 
AsyncAllFunc();

// [ 実行結果 ]
// (3) [100, 10000, 1000000]