【Javascript/Typescript】Promise、async/awaitとは？

「Promise、async/awaitってよく出てくるけどなんだろう？」

と思ったので、調べて見ました。

Promiseとは？

Promiseとは、非同期処理の完了時の結果および値を表します。

非同期処理が正常終了すれば結果としてresolveを返し、そうでなければrejectを返します。

これらの型がPromiseです。

また、戻り値でthenメソッドを実行することで、前の処理が終わってから次の処理を実行することができます。

例えば、次のような書き方になります。


func1().then( val => func2(val) );
func3();

この時、func1()の戻り値がPromiseです。

通常だと、上から順に関数が実行されていくので、次はfunc2()が実行されます。

しかし、thenメソッドに登録されている関数func2()とfunc3()は非同期で実行されるので、順不同で実行されます。

async/awaitはPromiseをもっと便利に扱うためのものです。

async で修飾した関数内でPromiseを返す関数にawaitをつけると、その関数から戻り値が返るまで待ちます。

Promiseでの例をasync/await形式で記述すると次の通りです。


const f = async () => {
 let val = await func1();
 func2(val);
}
f();
func3();

Promiseとthenで記述した方がスッキリしているように見えますが、実際にはこれらの処理は関数内に記載されます。関数内ではもっと多くの処理を順に実行することが多いので、async/awaitの方がスッキリした形になります。

１つの処理が実行中でも、他の処理を実行できるこのような処理を非同期処理と呼びます。

おおざっぱな例だと、「Zoomで会議を聞きながらプログラミングをすること」。

これが、非同期処理です。

非同期処理と反対なものは同期処理ですが、こちらは順番にそれぞれの処理を実行していくことです。

先程の例だと、Zoom会議が終わるまではプログラミングができない状態になります。

こう言うと同期処理にはデメリットしかないかのように感じますが、順番に実行することで動作を把握しやすく、コントロールしやすくなります。

Promiseやasync/awaitは非同期処理を同期して扱うことができ、コントロールしやすい状態にしてくれます。


const func = () => {
  return Promise.resolve('Success!');
};


func().then( val => {
  console.log(val);
  //expected output: 'Success!'
});

ここはPromiseと同じです。


const func = () => {
  return Promise.resolve('Success!');
};


const f = async() => {
  const val = await promise1();
  console.log(val);
}
f();
//expected output: 'Success!'