I need to do a HTTP request to server, the result is JSON. The result is used in another C++ function which is exported using embind exports.
When call this exported function from js, it runs fast and cannot store value from exported function, value is empty, later in 2 seconds function is completed but value never was assigned.
Steps to reproduce
1. My test/fake webapi https://jsonplaceholder.typicode.com/
2. Mi JS Code - Instance.js
window.VModule({ noInitialRun: false }).then(module => {
window.VMain = {
Module: module
};
});
window.GetData = async function GetData() {
try {
var url = "https://jsonplaceholder.typicode.com/todos/200"
var options = {
method: "GET",
//mode: "cors",
cache: "default"
};
var response = await fetch(new Request(url), options);
var json = await response.json();
console.log("DATA IN JS: " + json.title);
return json.title;
}
catch (error) {
console.log("DATA IN JS: ERROR_JS");
return "ERROR_JS";
}
}
3. My C++ code - main.cpp - EM_JS_GetData function who calls "window.GetData" defined in Instance.js - GetData() calls EM_JS_GetData window.GetData() -> EM_JS_GetData -> GetData() -> Button call from index.html.
#include <iostream>
#include <string>
#include <emscripten.h>
#include <emscripten/bind.h>
typedef std::string String;
EM_JS(const char *, EM_JS_GetData, (), {
return Asyncify.handleSleep(function(wakeUp) {
window.GetData()
.then(data=>{
//Converting JsString to C-String
var lengthBytes = lengthBytesUTF8(data)+1;
var result = _malloc(lengthBytes);
stringToUTF8(data, result, lengthBytes);
wakeUp(result);
})
});
});
String GetData()
{
try
{
const char *cstr = EM_JS_GetData();
String result(cstr);
free(static_cast<void*> (const_cast<char *>(cstr)));
emscripten_console_log((u8"DATA IN C++: " + result).c_str());
return result;
}
catch (...)
{
emscripten_console_log(u8"DATA IN CPP: ERROR_CPP");
return "ERROR_CPP";
}
}
int main(int argc, char ** argv)
{
std::cout<< "All components initialized" << std::endl;
}
EMSCRIPTEN_BINDINGS(my_module)
{
using namespace emscripten;
function("GetData", &GetData);
}
4. My compile command in power shell core syntax. - Compile.ps1
em++.bat `
"main.cpp" `
-o "VModule.js" `
-std=c++17 `
-O2 `
--bind `
-s WASM=1 `
-s SINGLE_FILE=1 `
-s ASYNCIFY=1 `
-s NO_EXIT_RUNTIME=1 `
-s EXTRA_EXPORTED_RUNTIME_METHODS=[`'ccall`',`'cwrap`'] `
-s EXPORT_NAME=`'VModule`' `
-s MODULARIZE=1 `
-s DISABLE_EXCEPTION_CATCHING=0 `
-s ENVIRONMENT=web `
-s ASYNCIFY_IMPORTS=[`'EM_JS_GetData`'] `
-s VERBOSE=0 `
5. Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validatos - WebAssembly</title>
<link rel="icon" href="Assets/favicon/favicon.ico">
<script type="text/javascript" src="VModule.js"></script>
<script type="module" src="Instance.js"></script>
</head>
<body>
<button onclick="OnBtnClick()">Test</button>
<script type="text/javascript">
function OnBtnClick() {
console.log("BEFORE");
var title = window.VMain.Module.GetData();//RESULT FROM FUNCTION IS NOT ASSIGNED // THIS LINE IS EXECUTED QUICKLY // BUT GetData is now executing.
console.log("DATA IN INDEX.HTML: " + title);//console prints empty string, value was assigned to empty string. GetData continues executing.
console.log("AFTER");
}
</script>
</body>
</html>
When I clicked the button, I get following result.
All components initialized
(index):17 BEFORE
(index):19 DATA IN INDEX.HTML:
(index):20 AFTER
Instance.js:19 DATA IN JS: ipsam aperiam voluptates qui
VModule.js:9 DATA IN C++: ipsam aperiam voluptates qui
how can I call syncronously window.VMain.Module.GetData()? Desired behaviour
All components initialized
(index):17 BEFORE
Instance.js:19 DATA IN JS: ipsam aperiam voluptates qui
VModule.js:9 DATA IN C++: ipsam aperiam voluptates qui
(index):19 DATA IN INDEX.HTML: ipsam aperiam voluptates qui
(index):20 AFTER