How to Fetch a JSON file in Webassembly - fetch

Question

I'm currently experimenting with Webassembly, and one thing I'm trying to do here is with a Webassembly to Fetch data from a JSON file, compile that into a .wasm module, and use that module in Javascript to read the result of the fetch.
I've tried following the code on https://kripken.github.io/emscripten-site/docs/api_reference/fetch.html but the resulting .wasm code is confusing to me because I can't find how to properly load that .wasm module in Javascript.
In case I'm going about this the wrong way, I really need some help with this.
started with this fetch.c file that is supposed to fetch JSON data from a file.
#include <stdio.h>
#include <string.h>
#include <emscripten/fetch.h>
/*////////////////////////
// This file contains the code for fetching
// -> Compiled to .wasm file with emscripten <-
*////////////////////////
void downloadSucceeded(emscripten_fetch_t *fetch) {
printf("Finished downloading %llu bytes from URL %s.\n", fetch->numBytes, fetch->url);
// The data is now available at fetch->data[0] through fetch->data[fetch->numBytes-1];
emscripten_fetch_close(fetch); // Free data associated with the fetch.
}
void downloadFailed(emscripten_fetch_t *fetch) {
printf("Downloading %s failed, HTTP failure status code: %d.\n", fetch->url, fetch->status);
emscripten_fetch_close(fetch); // Also free data on failure.
}
int main() {
emscripten_fetch_attr_t attr;
emscripten_fetch_attr_init(&attr);
strcpy(attr.requestMethod, "GET");
attr.attributes = EMSCRIPTEN_FETCH_LOAD_TO_MEMORY | EMSCRIPTEN_FETCH_PERSIST_FILE;
attr.onsuccess = downloadSucceeded;
attr.onerror = downloadFailed;
emscripten_fetch(&attr, "./json/bol_list1.json");
}
I compiled this with : emcc wasm/fetch.c -Os -s WASM=1 -s FETCH=1 -s SIDE_MODULE=1 -s BINARYEN_ASYNC_COMPILATION=0 -o wasm/fetch.wasm
fetch.wasm: https://pastebin.com/cHYpgazy
So, now with that module I'm supposed to read it in Javascript and get the result, but this is where I'm stuck, because as opposed to other examples this .wasm module doesn't have an obvious export/import thing and my previous methods of trying to load it failed.
wasmbyfile.js:
Method 1:
let obj;
loadWebAssembly('./wasm/fetch.wasm') //Testing function
.then(instance => {
obj = instance.exports._main;
console.log(obj);
});
function loadWebAssembly(fileName) {
return fetch(fileName)
.then(response => response.arrayBuffer())
.then(bits => WebAssembly.compile(bits))
.then(module => { return new WebAssembly.Instance(module) });
};
error result: wasmbyfile.js:64 Uncaught (in promise) TypeError: WebAssembly Instantiation: Imports argument must be present and must be an object
at fetch.then.then.then.module (wasmbyfile.js:64)
Method 2:
(async () => {
const fetchPromise = fetch('./wasm/fetch.wasm');
const { instance } = await WebAssembly.instantiateStreaming(fetchPromise);
const result = instance.exports._main;
console.log(result);
})();
error result: Uncaught (in promise) TypeError: WebAssembly Instantiation: Imports argument must be present and must be an object
So I'm stuck at this point, and not really sure how to load the module correctly in JS. I need some help for this, or am I doing this the wrong way from the beginning and is there a better way for me to do this?

Answer 1

You are getting an error because your WASM has import statements, while your call to instantiateStreaming does not send an importObject.
But the basic way to use WASM from Javascript is much simpler than: Just define a function in WASM that you can call from JS, and then you do the "fetch" from JS, for instance ("add.wasm"):
(module
(type $t0 (func (param i32 i32) (result i32)))
(func $add (type $t0) (param $p0 i32) (param $p1 i32) (result i32)
get_local $p0
get_local $p1
i32.add)
(export "add" (func $add)))
And then call it from Javascript:
const wasmInstanceFromFile = await WebAssembly.instantiateStreaming(await fetch('add.wasm'));
let sum = wasmInstanceFromFile.instance.exports.add(1,2);