javascript基礎 非同期処理編

javascriptを知る上でかなり重要な概念かと思っています。
できる限り、シンプルに記載していこうと思います。

##非同期処理(async)と同期処理(sync)
どちらもメインスレッドで実行されますので、少なからずどちらも影響を受けます。
同期処理とは順番にタスクを処理されることをいいます。
非同期処理はも同期処理同様順番に処理されますが、一つの非同期処理が終わるのを待たずに次の処理に移ります。
つまり、複数同時に処理されているタスクがあります。

Promiseとは

非同期処理の結果を表すビルトインオブジェクトになります。
エラーファーストコールバックとゆうルールを発展させたもので、
オブジェクトの形で統一的な見た目で扱うことができるようになっています。

const promise = new Promise((resolve, reject) => {
    // 成功したときはresolve()
    // 失敗したときにはreject()
    resolve() //resolve
});

const onResolve = () => {
    console.log("resolveされたときに呼ばれる");
};

const onReject = () => {
    console.log("rejectされたときに呼ばれる");
};

promise.then(onResolve, onReject);

####Promiseチェーン
割と下記は見たことある感じかと思いました。

console.log("実行")

const chainPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(()=> {
      console.log("成功しました。")
      resolve()
    },500)
  })
}

chainPromise().then((resolve) => {
  console.log(`${resolve} 成功`)
}).catch((error) => {
  console.lg({error})
})

####Promise.all
複数の Promise の結果を集約するのに便利です。

const TIMEOUT = 1000;

const chainPromiseAll = number => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(number);
    }, TIMEOUT);
  });
};

const chainPromiseNumber01 = chainPromiseAll(1);
const chainPromiseNumber02 = chainPromiseAll(2);
const chainPromiseNumber03 = chainPromiseAll(3);

const startDate = Date.now();

Promise.all([
  chainPromiseNumber01,
  chainPromiseNumber02,
  chainPromiseNumber03
]).then(values => {
  console.log(Date.now() - startDate + "ms");
  console.log(values); // [1, 2, 3]
});

AsyncとAwaitとは

Promiseの上に作られた構文なので、Promiseと組み合わせて利用する。
Promiseチェーンとして記載していた非同期処理の内容も同期処理のように書くことができます。
結構直感的に書くこともできます。

awaitはpromiseが解決するまで待機します。

async function Main() {
    await new Promise((resolve) => {
        setTimeout(resolve, 16);
    });
};

console.log("1");

Main().then(() => {
    console.log("3");
});

console.log("2");

Awaitは、Asyncの中でのみ利用可能です。

以上になります。

Promise自体を理解していないと腑に落ちないかと思ったので、今回アウトプットしながらできたので、
いろいろ知ることができたかと思いました。

この辺りはよく僕自身も利用していて、大変有意義な振り返りになりました。
日頃使っていてその時ヒラメかなったけど、よく考えればこんな使い方できたなとは結構思うことが多かったように思います。

PromiseやAsync Function並びにAwaitを今後の学習していき、また載せようと思います。

##関連書
JavaScript Promiseの本