半年ぶりの投稿になりますが、表題のことをやってみました。ちょっと時間の余裕ができたので、改めて勉強しようとしていろんなサイトを見たのですが、「async関数はPromiseを返す」ということが前提だけに、まずはPromiseを勉強するという体裁になっています。一方、「async/awaitは結局のところ、非同期呼び出しを同期呼び出しのように書いてよし」というシンプルに考えていいのかどうか、非常に迷うところでした。ということで、忙しい世の中ですので先に言ってしまうと、そこまでシンプルには残念ながら行かないことがわかります。INTER-Mediator Ver.6の実装で結構苦労したことが、本当にその苦労が必要だったのかということの検証でもあるのですが、これは個人的なところですね。
まず、次のようなプログラムがあるとします。以下は、適当な.jsファイルに入れて、nodeコマンドで実行します。ただし、「npm install xmlhttprequest」あるいはsudo付きで、XMLHttpRequestモジュールのインストールをお忘れなく。ブラウザで適当に動くようにされているのなら不要です。単にWebサイトのデータをAJAXで取り出すプログラムですが、どんな順序で実行されたかわかるように、コンソールへ出力を残しています。
const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
async function aFunc() {
console.log('start aFunc');
const r = new XMLHttpRequest();
r.open('GET', 'https://msyk.net')
r.onreadystatechange = () => {
if(r.readyState == 4) {
console.log('receive aFunc');
}
}
console.log('setup aFunc');
r.send()
console.log('send aFunc');
}
console.log('before aFunc');
let a = aFunc(); // async関数を普通に呼び出してみた
a.then(console.log('act1')) // thenが呼び出せるということはPromiseが返っている
console.log('after aFunc');
これを実行すると、次のようにコンソールに出てきます。ポイントは「after aFunc」より後に「recieve aFunc」が出るということです。AJAXによるダウンロード処理は非同期で行われているので、関数aFunc内に記述したコードが実行し終わる前にaFuncを呼び出しているステートメントの次に行くのです。これが非同期呼び出しの動作です。JavaScriptは「プログラムとして書いたコード」は、並列では動きませんが、「書いた順序」では実行しないというよくあるプログラムです。thenについてはPromiseを勉強すれば必ず説明されていますので、省略します。
before aFunc start aFunc setup aFunc send aFunc act1 after aFunc receive aFunc
さて、ここで、やりたいことは「通信が終わったら次に行く」と言う動作です。要するに、「aFuncを同期的に呼び出したいのでしょ。だったら、awaitを入れればいいじゃん」と思うところですね。やってみましょう。ここで、単にaFunc()の前にawaitをつけると文法エラーになります。awaitはasync関数内部でしか使えません。グローバルエリアはasyncではないので、エラーになるので、新たにbFunc関数を作り、そこで実行します。
const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
async function aFunc() {
console.log('start aFunc');
const r = new XMLHttpRequest();
r.open('GET', 'https://msyk.net')
r.onreadystatechange = () => {
if(r.readyState == 4) {
console.log('receive aFunc');
}
}
console.log('setup aFunc');
r.send()
console.log('send aFunc');
}
async function bFunc() {
console.log('before aFunc');
let a = await aFunc(); // async関数を普通に呼び出してみた
//a.then(console.log('act1')) // thenはエラーになり呼び出せない
console.log('after aFunc');
}
bFunc()
おっと、thenの呼び出しでエラーになるので、コメントします。そして、コンソールの出力結果を見ると、次のようになっていました。前と変わりません。after aFuncより後にreceive aFuncがあるということは、aFuncのコールが終わってから実行したコードよりも後に、aFuncの中身が処理されています。つまり、async/awaitを使っても同期呼び出しされていないということです。おやおや、おかしいですね。
before aFunc start aFunc setup aFunc send aFunc after aFunc receive aFunc
ここで、thenの呼び出しでエラーを出してみると、This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch().などと書かれています。はい、ここでPromiseの知識が必要です。Promiseでは、thenやcatchメソッドを呼び出すことで、「先に進める」的な動作をするというか、それを期待しているとも言えます。thenメソッドの2つの引数にresolveやrejectメソッド（もちろん、その名前でなくてもいいのですが、たぶん、皆さんは常にそう書いていると思います）が乗ってくるので、そちらの方がお馴染みかもしれません。ともかく、Promiseを書かないで、asyncにしたからと言って、そのままawaitできるのかというと、この例で示すようにできないということになります。
では、どう書けばいいかというと、こういうことです。非同期処理部分をPromiseで包みます。既存の処理をPromise化するのに適した方法として、コンストラクターの引数に、処理を記述する方法です。処理が終わったらresolve()を呼び出します。reject()は省略します。
const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
async function aFunc() {
console.log('start aFunc');
const p = new Promise((resolve, reject) => {
const r = new XMLHttpRequest();
r.open('GET', 'https://msyk.net')
r.onreadystatechange = () => {
if(r.readyState == 4) {
console.log('receive aFunc');
resolve()
console.log('resolve aFunc');
}
}
console.log('setup aFunc');
r.send()
console.log('send aFunc');
})
}
async function bFunc() {
console.log('start bFunc');
await aFunc()
console.log('end bFunc');
}
bFunc()
結果はこのようになります。おや？receive aFuncが、end bFuncより後にあります。これじゃあ、全然同期的に呼び出しているんじゃないですね。なんででしょうね？どこが間違っているのでしょう？ これは難しいクイズですね。実はブログを執筆しながら、偶然発見してしまったトラブルです。
start bFunc start aFunc setup aFunc send aFunc end bFunc receive aFunc resolve aFunc
はい、答えは、aFunc関数の最後に「return p」つまり、生成したPromiseを返すというステートメントが必要になります。async内にPromise生成を記述しないと、自動的に生成されるけど、書いてしまったら、ちゃんと自分で返すようにしないといけないと言うことですね。そうすれば、コンソールには次のように出力されます。無事、非同期通信処理の結果を受け取ってから、await aFunc()の次のステートメントを実行しています。つまり、aFunc()は非同期処理が記述されているけども関数呼び出しは同期的に処理が行われたと言えます。
start bFunc start aFunc setup aFunc send aFunc receive aFunc resolve aFunc end bFunc
ところで、前のプログラムで、bFunc()の部分の次にconsoleを記述したら、どの順序で実行されるでしょう。一番最後？ それは違いますね。receive aFuncの前にbFunc()の次に記述したステートメントが実行されます。つまり、bFunc()によって呼び出されるのは非同期関数なのです。当たり前ですね、asyncと頭に書いているから。なので、さらにbFunc()呼び出しの部分を同期的にやりたいとなると、ちょっとしつこいですが、こんな風に書かないといけません。
const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
async function aFunc() {
console.log('start aFunc');
const p = new Promise((resolve, reject) => {
const r = new XMLHttpRequest();
r.open('GET', 'https://msyk.net')
r.onreadystatechange = () => {
if(r.readyState == 4) {
console.log('receive aFunc');
resolve()
console.log('resolve aFunc');
}
}
console.log('setup aFunc');
r.send()
console.log('send aFunc');
})
return p
}
async function bFunc() {
console.log('start bFunc');
await aFunc()
console.log('end bFunc');
}
async function cFunc() {
console.log('# before bFunc');
await bFunc()
console.log('# after bFunc');
}
cFunc()
コンソールへの出力結果は次のようになり、期待通り、awaitで非同期処理が同期処理として呼び出されています。
# before bFunc start bFunc start aFunc setup aFunc send aFunc receive aFunc resolve aFunc end bFunc # after bFunc
最終的に、ここでは、cFunc()という非同期呼び出しがありますが、他の部分のコードは全部、同期的に動いていると言える状態かと思います。ですが、全部の関数にasyncがつけられていて、非同期に動く関数であることを明確に示しています。INTER-Mediatorでの実装では、通信処理は何段階か呼び出した低いレイヤーで行なっています。そこをasync/await対応にしたら、その1つ上をやっぱりasync/await対応にしてということになり、要するに全階層がasync/await対応、つまり、全レイヤーが非同期処理するという状況にまずはなりました。asyncで非同期にして、awaitで同期的に呼び出すと言うことをあちらこちらに適用しないといけなくなりました。なんだか、非同期処理を同期的に記述してプログラムしやすくするという目的があるのに、全体的に非同期処理になってしまうではないかというジレンマに陥りました。結局、全体的に見直しが必要になったのは言うまでもありませんが、AJAXを非同期にするために、なんとか頑張ったのでした。実は、それから数年経過し、その頑張りに意味があったのか、ちょっと検証したくなったので、今日、こんなテストをやっているうちに、この記事を書こうと考えた次第です。まあ、方針としては間違いなかったのかと思います。お付き合いありがとうございます。