Javascriptの同期処理についてメモっておく
サーバからユーザ情報を取得して表示を更新する処理を作るに当たって、httpの完了を待つ処理が必要でした。
#3 クライアントでプレイヤー情報を参照する · bluemon0919/lobby@8f4b0f2 · GitHub
こちらの記事を参考に作りました。
var u1_name; // これを更新する var u2_name; function getUserInformation() { const p = new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', "/players/" + u2, true); xhr.responseType = 'json'; xhr.onload = function() { var res_data = this.response; u1_name = res_data[u1]; u2_name = res_data[u2]; resolve(); // 処理の終わりを通知する }; xhr.send(); }); return p; } function init() { ... getUserInformation().then(() => update()); // getUserInformationが終わったらupdateを行う }
上の例では使っていませんが、
resolveメソッドに結果を渡し、それをthenメソッドの中で受け取ることができます。
次の例では文字列"done"を渡してconsole.logで出力します。
function getUserInformation() { const p = new Promise((resolve, reject) => { ... resolve("done"); } } function init() { ... getUserInformation().then((result) => { console.log(result); update(); }); // getUserInformationが終わったらupdateを行う }