【ワンピースで覚えるJavaScript】第１５回 非同期処理 Promise/async/await(プログラミング入門講座)

今回はJavaScriptの非同期処理を解説していきます。

これは理解しにくい内容ですよね。

１つ１つコードの意味を確かめながら、理解していきましょう！

/* Promise / async / await
 非同期処理 ある処理が終了するのを待たずに、別の処理を実行すること
*/
console.log("１人目ゾロ");
console.log("２人目ナミ");
console.log("３人目ウソップ");
console.log("４人目サンジ");

console.log("--setTimeoutを利用");
console.log("１人目ゾロ");
//setTimeout(関数, 時間)
//setTimeout(() => console.log("２人目ナミ"), 3000);
console.log("３人目ウソップ");
console.log("４人目サンジ");
//JavaScriptは処理を待てない！

/*
console.log("--入れ子setTimeout--")
const luffy_members = () => {
  console.log("１人目ゾロ");
  setTimeout(() => {
    console.log("２人目ナミ");
    setTimeout(() => {
      console.log("３人目ウソップ");
      setTimeout(() => {
        console.log("４人目サンジ");
      }, 1000);
    }, 1000);
  }, 1000);　　　　
};
luffy_members();

*/

//処理の順番に約束を!「Promise」
/*
console.log("--Promiseを利用");
console.log("１人目ゾロ");
new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("２人目ナミ");
    //resolve();
    //reject();
    resolve("ウソップ");
  }, 3000);
})//.then(() => { console.log("３人目ウソップ");})
  .then((usoppu) => { console.log("３人目" + usoppu); })
  .then(() => { console.log("俺がキャプテンだ！"); })
  .catch(() => { console.log("３人目はまだです"); })
  .finally(() => { console.log("仲間が増えた！！"); });
*/
/*
new Promise((resolve, reject) => { 非同期処理の本体 });
      resolve 成功を通知する関数
      reject  失敗を通知する関数
   非同期処理本体の中で resolve() reject()を呼び出す
   非同期処理の結果を受け取るメソッド
       then: 成功した時の処理(resolve()が呼び出されたとき)
      cattch: 失敗した時の処理(reject()が呼び出されたとき)
    finally: 成功/失敗に関わらす、完了の処理
*/
/*
console.log("--Promise(thenつなげる)");
new Promise((resolve) => {
  setTimeout(() => {
    console.log("１人目ゾロ");
    resolve();
  }, 1000);
})
  .then(() => {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log("２人目ナミ");
        resolve();
      }, 1000);
    });
  })
  .then(() => {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log("３人目ウソップ");
        resolve();
      }, 1000);
    });
  })
  .then(() => {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log("４人目サンジ");
        resolve();
      }, 1000);
    });
  });
*/
//async, await
/* Promiseを利用した構文よりも、簡潔に非同期処理が書ける
  async 非同期関数を定義する関数宣言！
  　ex) async function sample() {}
      async functionは呼び出されるとPromiseを返す。
        値をreturnした場合、Promiseは戻り値をresolve
        例外,throwした場合、その値をreject
*/
                      //関数は非同期関数
straw_hat_pirates = async () => {
  await become_member("１人目ゾロ"); //関数の前にawaitがあるので
  await become_member("２人目ナミ"); //Promiseの結果がくるまで待つ
  await become_member("３人目ウソップ");
  await become_member("４人目サンジ");
};

const become_member = (member) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(member);
      resolve();
    }, 1000);
  });
};
console.log("--async awaitを利用--")
straw_hat_pirates();