はじめに
JavaScriptの初心者を脱出して最初に躓くのは恐らく非同期処理な気がします。
自分も見事につまずいているので、記事にまとめながら勉強していきます。
非同期処理とは
処理を待たずにどんどん処理を進めていきます。
遅いやつを待ってあげるような優しい奴ではありません、非情です。
constfs=require('fs');constfile1=fs.readFile('file1.txt')constfile2=fs.readFile('file2.txt')constfile3=fs.readFile('file3.txt')console.log(`file1: ${file1}, file2: ${file2}, file3: ${file3}`)動きません。
readFileは非同期処理です。file1君が処理を終えるのを待っているほどfile2君の気は長くありません。
それはfile3も同じです。結果として誰も成功できない。これが非同期処理です。
解決策
この誰も待ってくれない問題を解決する方法としてコールバックがあります。
constfs=require('fs');fs.readFile("file1.txt",function(err,hoge){fs.readFile("file2.txt",function(err,fuga){fs.readFile("file3.txt",function(err,foo){console.log(`file1: ${file1}, file2: ${file2}, file3: ${file3}`)});});});これならみんな終わるのを待ってくれる優しいやつになります。
しかし、今回は処理が３つなのでまだマシですが、これが5,6,...と増えると、俗にいうコールバック地獄に陥ります。
async awaitの登場
こんなコールバック地獄を解決してくれるのがasync awaitです。
constfs=require('fs');constutil=require('util');// fs.readFileをPromise化constreadFileSync=util.promisify(fs.readFile);asyncfunctionreadFiles(){varfile1=awaitreadFileSync("file1.txt")varfile2=awaitreadFileSync("file2.txt")varfile3=awaitreadFileSync("file3.txt")console.log(`file1: ${file1}, file2: ${file2}, file3: ${file3}`)}readFiles()asyncをつけられた関数は非同期処理を宣言し、Promiseを返すようになります。
awaitは、Promiseの処理が終わるまで待つようにするための処理です。
本来であれば、Promiseの処理がthenとcatchでチェーンしていきますが、awaitを使用することにより簡潔に書くことができますね。
ちなみに
constfs=require('fs');varfile1=fs.readFileSync("file1.txt")varfile2=fs.readFileSync("file2.txt")varfile3=fs.readFileSync("file3.txt")console.log(`file1: ${file1}, file2: ${file2}, file3: ${file3}`)これで解決できます。
async awaitを使いたかったので、util.promisifyを使用して無理やりasync awaitに組み込みました。
おしまい
JavaScript、まだまだ難しい部分がたくさんありますね。
非同期処理の概要を掴む際の参考になれれば幸いです。
何か指摘事項等ございましたら、コメントやTwitterなどでお願いします。