JavaScriptのasync/awaitを完全に理解する
はじめに
こんにちは. Acompanyの湯浅です. 今回はJavaScriptを書く時になんとなくで済ませがちなasync/awaitについて解説します.
非同期処理
async/awaitの解説に入る前に理解するべきことが2つあります. 1つは非同期処理です.
非同期処理とは「ある関数が呼ばれた時に, 返り値として渡したい値を返すのではなく一度関数として終了し, 渡したい値を返せる状態になったら呼び出し元にその値を返す」というものです.
イメージとして電子レンジを思い浮かべると良いでしょう.
電子レンジでおにぎりを温める時, 私たちはタイマーをセットして一旦待ちます. これが「関数として一度終了している状態」です.
そして, 時間が経つとおにぎりが食べられる状態になります. これが「渡したい値を返せるよう状態になったらその値を返す」ということです.
Promise
async/awaitの解説に入る前に理解するべきことの2つ目はPromiseです. PromiseはJavaScriptで非同期処理を行うためのものです.
Promiseでは最終的に渡したい値の代わりに「プロミスオブジェクト」を返しておきます. そして渡したい値を返せる状態になったら, そのプロミスオブジェクトを通して呼び出し元にその値を返します.
さっきの電子レンジの話でいうと, タイマーをセットした時に私たちは「ホカホカのおにぎりが食べられる券」を受け取ります. そして時間が経つと「ホカホカのおにぎりが食べられる券」と引き換えにおにぎりをもらうというイメージです.
Promiseの例
まずPromiseオブジェクトを返す関数を作ります. これは関数を呼んだ100ミリ秒後に「Hello, World」と返す関数です.
function delayDisplay() {
//Promiseオブジェクトを返却する.処理成功時にはresolveが呼ばれる.
return new Promise(function(resolve, reject){
setTimeout(function() {
resolve('Hello, World');
}, 100);
});
}Webアプリケーションを作る時にはPromiseオブジェクトを返す関数を書くことはそれほどなく, 使うライブラリやAPIが返す関数を書いていて, それを受け取るというケースが多いです.
では上の関数の返り値を受け取ります.
delayDesplay()
.then(function(value) {
//非同期処理が成功した時の処理
//Hello, Worldと表示される
console.log(value);
})
.catch(function(error) {
//非同期処理が失敗した時の処理
console.log(error);
})関数呼び出しに対して, .then() で結果の受け取り, .catch() でエラー処理をします.
async/await
Promiseってなんか書きにくいなあ〜と思った人がいたのでしょう. 非同期処理をよりわかりやすく書けるasync/awaitが登場しました.
async
asyncを関数の前につけると, その関数はPromiseオブジェクトを返すようになります. つまり結果を取得するには .then() を使えます.
async taskA() {
return 100;
}taskA().then(function(value) {
// 100と表示される
console.log(value);
})
await
asyncをつけた関数の中ではawaitを使うことで .then() を代用できます.
async function taskA() {
return 100;
}async function exection() {
const result = await taskA();
// 100と表示される
console.log(result);
}exection();
まとめ
いかがだったでしょうか. 実はasync/awaitは何も難しいことはなくたったこれだけのことなんです.
・asyncは関数につけるとPromiseオブジェクトを返す.
・awaitはasyncがついている関数の中で使えて .then() を代用できる.
今後も，Acompanyからブロックチェーンやプログラミングに関する記事を投稿していきますので，ぜひfollowしていただけると嬉しいです．
