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を行う
}