提问者:小点点

JS:如何将值从模块文件传递到主文件


我是js主文件导入模块的新手。

我试图将getdata.mjs模块中的“results”值传递给geolocator.mjs“returneddata”,代码如下:

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};

我可以在“结果”内返回正确的数组值。

我很清楚,我必须让geolocator.mjs中有一个“延迟”,以便执行getdata.mjs中的异步函数,然后将值设置回“returneddata”,但我不明白如何。。。

我尝试过使用异步函数,但我显然做错了。

非常感谢你的帮助。


共1个答案

匿名用户

您正在调用异步函数fetchdata,但是您完全忽略了结果。 您的意思是返回fetchData(this.request)吗? 然后,您的returnedData变量将是对数据的承诺,如果它本身在一个异步函数中,您可以像下面这样await:

let returnedData = await getdata.requestFromParameters();

或者你可以。然后承诺:

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

然后回调,values=>; 。。。,将在异步任务完成时运行。

有关承诺的更多信息