node.js+express+MySQLでquery結果後の代入で消える

Question

前提・実現したいこと

お世話になります、まだまだ勉強が足りません。
node.js + express でMySQLから取得したデータを
SQL文毎に保存しておき、最後にrenderでまとめて出力したいのですが
セットした変数が空になってしまいます。

発生している問題・エラーメッセージ

var gl_Result = {}; // 上層でグローバル宣言
...SQL実施後...
console.log(gl_Result); // ← {} と表示されるだけ

該当のソースコード

// app.js
var gl_result = {};

app.set('ejs', ejs.renderFile);
	const con = mysql.createConnection({
		host: 'localhost',
		user: 'root',
		password: 'test',
		database: 'test',
	});

app.get('/', (request, response ) =>{
	const promise1 = new promise((resolve, reject)=>{
		//ここではresolveを書いていませんが実際には使っています
		var sql = "select * from test";
		con.query(sql, function(err, result){
			if(err) return console.log(err);
			gl_result = result;
		});
	})
	//...中略(他のSQL処理)...
	.then(()=>{
		console.log(gl_result); // ←ここで {} しか表示されない
		response.render({data: gl_result, ...});
	});
});

app.listen(3000,() =>{
	console.log('server start');
});

試したこと

オブジェクトとfor文を使ってやってみましたが、
結果は同じでした。
ちなみに result の前後どちらかに console.log(result[0].name); とやると
しっかりと値が表示されます。

for(i in result){
	gl_result[i] = new Object();
	gl_result[i].name = result[i].name;
	gl_result[i].age = result[i].age;
}

もしくは

function setValue(name, age){
	this.name = name;
	this.age = age;
}

for(i in result){
	gl_result[i] = new setValue(
			result[i].name,
			result[i].age
			);
}

上記でも同様でした。

不足点や懸念点がありましたら、是非ともご教示ください。
答えでは無くても「こうしたらどう？」というのでも構いません。

よろしくお願い致します。

Answer 1

const promise1 = new promise((resolve, reject)=>{

new Promiseじゃないと動かないかと思います。
まぁ、質問文作成中の加工でぷちやらかししたんだと思うのでスルーします。

//ここではresolveを書いていませんが実際には使っています

resolveのタイミング誤りでは？
どこでresolve叩いているかは「極めて重要」で、
この情報を書いてなきゃ回答できません。

そしてそこを書いてないって事は、
エスパー予測するならばこの位置に記載されているんだと思います。

var gl_result = {};
app.get('/', (request, response ) =>{
    const promise1 = new promise((resolve, reject)=>{
        var sql = "select * from test";
        con.query(sql, function(err, result){
            if(err) return console.log(err);
            gl_result = result;
            // resolve(); // <- もしこの位置なら取れているはず
        });
        resolve(); // <- 多分ここにあるんでしょ？
    })
    // 中略
    .then(() => {
      console.log(gl_result); // ←ここで {} しか表示されない
    })
});

Promiseに関しての知識がまだ足りてなさそうです。
もう少しPromiseとはなんぞやを勉強すれば先にすすめるでしょう。

しかし、このペースだと実務で使い物になるコードにたどり着くのはかなり先になりそうです。
Promiseとかコールバック関数とかノイズなんで出来れば削りたいところ。
なので先に完成形を見せます。

// app.js -> インデントをスペース2個にしてる
const mysql = require("mysql2/promise");

// 実務ならコネクションの確立は複数コネクションをプールするやり方のが良いかもね
// https://www.npmjs.com/package/mysql2#using-connection-pools
const con = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'test',
  database: 'test',
});

app.set('ejs', ejs.renderFile);

// await構文を使うには、async関数であることが重要なので、
// アロー関数の前にasyncというキーワードを付与する
app.get('/', async (request, response ) => {
  try {
    // mysql2/promiseを使ってqueryを発行すると、
    // 戻り値はPromiseのインスタンスになるのでawaitで待って代入できる
    const gl_result = await con.query("select * from test");

    // 複数のSQL文の発行をした想定
    const gm_result = await con.query("select * from test2");
    const gn_result = await con.query("select * from test3");

    // 全部のクエリの結果が揃っていることを確認
    console.log(gl_result, gm_result, gn_result);

    response.render({data: gl_result, ...});
  } catch (e) {
    // エラー処理は1個の大きなtry-catchで包んでいる
    // これもasync関数の恩恵で、Promise.catchの糖衣構文になっている
    console.error(e);
  }
});

app.listen(3000, () => {
  console.log('server start');
});

まずnpmのライブラリでmysqlを使っているならば、
とりあえずmysql2に乗り換えましょう。

参考記事: node.js MySQLではなくMySQL2を使ったほうがいいみたい

そしてPromiseを同期風に記述できるES7のasync/await 構文を学習しましょう。

• async - MDN
• await - MDN
• ES7 Async Awaitのサンプル - mysql2のドキュメント

それを元に質問文で書かれているコードの部分をasync/await方式で記述しなおすと完成形のコードになります。
このコードを資本に色々と理解を深めてPromiseやasync/awaitを使いこなしていきましょう。

Comments

[HYDESA]

大変貴重なご意見、ありがとうございました。
自分の周辺にweb系の技術者がおらず、
またwebも時系列系がいまいち解りにくくて苦労しており、
少しずつ理解を深めながら進めていたので、このコメントは目から鱗でした。
この情報を基に理解を深めます。

new Promise、失礼しました。
やらかしましたm(_ _)m

Resolveは最初に処理したSQL件数を以後の処理で共有していたため、
ここには記載しませんでした。
それも記載すればよかったですね。
場所はfunction内に記載しています。

本当にありがとうございました。

[HYDESA]

追伸です。

const gl_result = await con.query("select * from test");

上記の記述だと_bufが入った二次元連想配列になってしまうので、
var result = gl_result[0]
として処理しましたが、他にスマートなやり方はありますでしょうか？

[miyabi-sun]

https://stackoverflow.com/questions/57029074/getting-schema-info-in-mysql-query

分割代入が使えそうですね。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

その場合こうして不要な部分は捨ててしまうのがスマートかなと思います。
`const [gl_result] = await con.query("select * from test");`

[HYDESA]

おお！
一発でした。
ありがとうございました、助かりましたm(_ _)m