JS : How to pass value from module file to main file

Question

I'm newbie to js main file importing modules.

I'm triyng to pass "results" value from getdata.mjs module to geolocator.mjs "returnedData" with following code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geolocator</title>
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="./css/bootstrap-mod-min.css">
    <link rel="stylesheet" href="./css/geolocator.css">

</head>
<body>

    <div id="geolocatorAnchor"></div>

    <script src="./libs/jQuery-2.2.4-core-min.js"></script>
    <script src="./libs/jquery-ui-1.11.4-min.js"></script>
    <script src="./libs/bootstrap.min.js"></script>

    <script type="module" src="./modules/getdata.mjs"></script>
    <script type="module" src="./geolocator.mjs"></script>
</body>
</html>

Gelocator.mjs:

import {GeolocatorLayout} from "./modules/layout.mjs";
import {GetData} from "./modules/getdata.mjs";

/* /// VARIABLES   \\\ */

/* GIS server adress */
let httpsGisServer = <myServer name>;
let proxyiedUrl = httpsGisServer + "/dotnetproxy/proxy.ashx?";

window.document.body.onload = function () {

    const geolocator = new GeolocatorLayout('geolocatorAnchor');
    geolocator.init();

    const dataStreetsUrl = httpsGisServer + "/php2apps/rues/PDOdataRuesINSbilingual.php";
    const headers = new Headers({'Content-Type': 'text/plain'});
    const getdata = new GetData('GET', headers, 'cors', 'default', dataStreetsUrl);

    let returnedData = getdata.requestFromParameters();
}

getData.mjs

class GetData {
    constructor(method, headers, mode, cache, request) {
        this.method = method;
        this.headers = headers;
        this.mode = mode;
        this.cache = cache;
        this.request = request;
    }

    requestFromParameters() {
        const options = {
            method: "GET",
            headers: this.headers,
            credentials: "same-origin"
        }
        async function fetchData(url) {
            try {
                let fetchResult = fetch(url, options);
                let response = await fetchResult;
                let results = await response.json();
                return results;
            } catch(e){
                throw Error(e);
            }
        }
        fetchData(this.request);
    }
}
export {GetData};

I can return correct array values within "results".

I do clearly understand that I must let a "delay" in geolocator.mjs in order to the async functions from getdata.mjs to be executed and then sets the value back to "returnedData" but I don't understand how...

I've tried with async functions but I'm clearly doing it wrong.

Thanks a lot for any help.

Answer 1

You are calling your async function, fetchData , but then you are completely disregarding the result. Did you mean to return fetchData(this.request) ? Then, your returnedData variable will be a promise for the data, which you can either await for like this if it itself is in an async function:

let returnedData = await getdata.requestFromParameters();

Or you can .then the promise:

let returnedData;
getdata.requestFromParameters().then(value => {
    returnedData = value;
}

Then the callback, values =>... , will be run when your async task completes.

More info on promises

JS : How to pass value from module file to main file

Question

1 answers

solution1
0 ACCPTED 2020-06-28 14:40:44

JS : How to pass value from module file to main file

Question

1 answers

solution1 0 ACCPTED 2020-06-28 14:40:44

solution1
0 ACCPTED 2020-06-28 14:40:44