JavaScriptの同期処理と非同期処理の理解が追いついていないかと思うので、実装の流れに混乱が生じていると考えられます。まずは(おそらく動くであろう)書き直したコードはこちらです。
async function get_list() {
// get_listの実行後のthenの第一引数で取得することができる
return await eel.projectlist()();
}
window.onload = function () {
get_list().then(function (gli) {
var txt = "";
for (let i = 0; i < gli.length; i++) {
txt =
txt +
`<div class="col-lg-3 col-md-6 col-sm-6 work"> <a href="images/work-8.jpg" class="work-box"> <img src="images/work-8.jpg">
<div class="overlay">
<div class="overlay-caption">
<h5>Project Name</h5>
<p>${gli[i]}</p>
</div>
</div>
<!-- overlay -->
</a> </div>`;
}
document.getElementById("message").innerHTML = txt;
});
};
Promiseから値を取得するような場合、Promiseチェーンを繋げる必要があります。今回の質問では、get_list
関数がPromiseを返すので、値を取得するためには、then
を繋げ、callback中で値を操作する必要があります。
get_list().then(function (value) {
console.log(value); // Promise Chainで値を取得できる。
})
次に、Promiseは非同期で処理されるため、コードを書いた順番で処理されるとは限りません。
get_list().then(function () {
console.log("hello from promise chain!");
})
console.log("hello from outo of promise chain!")
これを実行すると、ログには以下の順番で出てくると思います。
"hello from promise chain!"
"hello from outo of promise chain!"
非同期処理はJavaScriptのruntimeによって制御されるため、実際に上記の順序出てくるかもしれないし、出てこないかもしれません。これは正確にはわかりません。ただ明らかなのは、Promise ChainのCallback中に処理を書くことで非同期処理の完了を確実に取得することが可能です。
さて、ここまでの回答で不明な点があればもう少しPromiseについて学習してみてください。
参考