javascript - 为什么函数 in then 没有接收到对象-6ren

javascript - 为什么函数 in then 没有接收到对象

转载作者：行者123 更新时间：2023-12-05 03:30:38

25

4

我理解 Promises 的概念，但有些事情对我来说似乎并不完全清楚。

我有以下 html:

<!DOCTYPE html> .......
<div id="map"></div>
<script
        src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API&callback=initialize"
        async></script>
</body>
</html>

<script src="js/currentRoute.js"></script>

我有以下 JS 代码:

async function getCurrentUserCoordinates() {
    console.log("Am getCurrentUserCoordinates")

    const url = baseUrl + `/SOME_REST_API_URL`;

    if (checkAdminOrTechRights(parseToken(getToken()))) {
        await fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Authorization': `Bearer ${getToken()}`
            },
        })
            .then((response) =>
                response
                    .json()
            )
            .then(terminals => {
                let locations = [];
                terminals.forEach(terminal => {
                    locations.push({
                        lat: terminal.latitude,
                        lng: terminal.longitude,
                        name: terminal.name,
                        location: terminal.location
                    })
                })
                console.log(locations) // ALL IS PRINTING OK HERE
                return locations;
            }).catch((err) => {
                console.error(err);
            })
    }
}

function initMap(locations) {
    console.log("Am initMap")
    console.log("printing locations: " + locations) // I HAVE UNDEFINED HERE
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: {lat: 0.123123123123, lng: 0.123123123123},
    });
    const infoWindow = new google.maps.InfoWindow({
        content: "",
        disableAutoPan: true,
    });

    const markers = locations.map((terminal, i) => {
        const label = `${terminal.name}, ${terminal.location}`;
        const marker = new google.maps.Marker({
            position: terminal,
            label,
        });

        marker.addListener("click", () => {
            infoWindow.setContent(label);
            infoWindow.open(map, marker);
        });
        return marker;
    });

    new markerClusterer.MarkerClusterer({markers, map});
}


async function initialize() {
    console.log("Am initialize")
    getCurrentUserCoordinates()
        .then(locations => initMap(locations))
        .then(() => console.log("Am done"))
        .catch((err) => {
            console.error("ERROR!!! " + err);
        })
}

我有以下日志:

Am initialize

currentRoute.js:2 Am getCurrentUserCoordinates

currentRoute.js:28 (26) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {lat: 1.123123123, lng: 1.123123123, name: 'TERM-0001', location: 'LOCATION'}1: {lat: 1.123123123, lng: 1.123123123, name: 'TERM-0099', location: 'LOCATION'}2: ............ 25: {lat: 1.123123123, lng: 1.123123123, name: 'TERM-0023', location: 'LOCATION'}length: 26[[Prototype]]: Array(0)

currentRoute.js:37 Am initMap

currentRoute.js:38 printing locations: undefined

所以在我看来，当 getCurrentUserCoordinates() 返回结果(位置)时，必须调用 initMap()。在函数内部正在获取位置，并且在打印的日志中可以看到。但是位置在 initMap 函数中作为未定义传递。

我没有得到什么？

谢谢。

最佳答案

您的代码的主要问题是您从 then 中的嵌套函数内部调用 return，您认为它会从外部方法 getCurrentUserCoordinates 返回 但事实并非如此。

如果不将 async/await 与 then 混合使用，可以极大地简化您的功能 - 前者更易于管理。该代码还受益于将笨重的数组 + forEach 替换为数组上的简单 map。

async function getCurrentUserCoordinates() {
    console.log("Am getCurrentUserCoordinates")

    const url = baseUrl + `/SOME_REST_API_URL`;

    if (checkAdminOrTechRights(parseToken(getToken()))) {
      try{
        const result = await fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Authorization': `Bearer ${getToken()}`
            },
        });
        const terminals = await result.json();
        let locations = terminals.map( terminal => ({
                lat: terminal.latitude,
                lng: terminal.longitude,
                name: terminal.name,
                location: terminal.location
        }))
        console.log(locations) // ALL IS PRINTING OK HERE
        return locations;
       }
       catch(err){
        console.error(err);
       }        
    }
}

* 请注意，此代码中的返回位置现在位于方法本身的外部范围内，但是由于该方法是async，它实际上返回一个Promise 所以你必须稍后等待它(见下文)。 H/T @JeremyThille

稍后在您的代码中也是如此

async function initialize() {
    console.log("Am initialize")
    try{
        const currentUserCoords = await getCurrentUserCoordinates();
        const locations = initMap(currentUserCoords);
        console.log("Am done"))
    }
    catch(err){
        console.error("ERROR!!! " + err);
    }
}

关于javascript - 为什么函数 in then 没有接收到对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70784285/

25

4

0

文章推荐： lua - _ENV 在 Windows 上的 Zerobrane Studio 中不工作

MPI 接收/收集动态矢量长度
我有一个存储结构向量的应用程序。这些结构保存有关系统上每个 GPU 的信息，如内存和 giga-flop/s。每个系统上有不同数量的 GPU。我有一个程序可以同时在多台机器上运行，我需要收集这些数据
MPI 非阻塞发送/接收
我很好奇 MPI 中缺少此功能: MPI_Isendrecv( ... ); 即，非阻塞发送和接收，谁能告诉我其省略背后的基本原理？最佳答案我的看法是 MPI_SENDRECV存在是为了方便那些想
c - 接收/接收的最大镜头数是多少
当我用以下方法监听TCP或UDP套接字时 ssize_t recv(int sockfd, void *buf, size_t len, int flags); 或者 ssize_t recvfrom
java - 如何推迟事件触发/接收
SUM:如何在 azure 事件网格中推迟事件触发或事件接收？我设计的系统需要对低频对象状态(创建、启动、检查长时间启动状态、结束)使用react。它看起来像是事件处理的候选者。我想用azure函数
来自未知来源的 MPI 接收
我正在 MPI 中实现一个程序，其中主进程(等级 = 0)应该能够接收来自其他进程的请求，这些进程要求只有根才知道的变量值。如果我按等级 0 进行 MPI_Recv(...)，我必须指定向根发送请求的
c++ - WM_CLOSE事件从不发送/接收？
我正在学习DX12，并在此过程中学习“旧版Win32”。我在退出主循环时遇到问题，这似乎与我没有收到WM_CLOSE消息有关。在C++，Windows 10控制台应用程序中。 #include
java - 如何推迟事件触发/接收
SUM:如何在 azure 事件网格中推迟事件触发或事件接收？我设计的系统需要对低频对象状态(创建、启动、检查长时间启动状态、结束)使用react。它看起来像是事件处理的候选者。我想用azure函数
java - 我如何处理短信发送/接收？
我想编写方法来通过号码发送短信并使用编辑文本字段中的文本。发送消息后，我想收到一些声音或其他东西来提醒我收到短信。我怎样才能做到这一点？先感谢您，狼。最佳答案这个网站似乎对两者都有很好的描述:ht
java - 接收/发送数据报套接字数据
所以我正在用 Java 编写一个程序，在 DatagramSocket 和 DatagramPacket 的帮助下发送和接收数据。问题是，在我发送数据/接收数据之间的某个时间 - 我发送数据的程序中的
java - 构建相机应用程序 - 接收
我是 Android 编程新手，我正在用 Java 编写一个应用程序，该应用程序可以打开相机拍照并保存。我通过 Intents 做到了，但看不到 onActivityResult 正在运行。我已经在
c++ - 一个套接字在线程中发送/接收
我有一个套接字服务器和一个套接字客户端。客户端只有一个套接字。我必须使用线程在客户端发送/接收数据。 static int sock = -1; static std::mutex mutex; vo
c - 数据未正确发送/接收
我正在尝试使用 c 中的套接字实现 TCP 服务器/客户端。我以这样的方式编写程序，即我们在客户端发送的任何内容都逐行显示在服务器中，直到键入退出。该程序可以运行，但数据最后一起显示在服务器中。有人可
c - 接收 AT 命令
我正在使用微 Controller 与 SIM808 模块通信，我想发送和接收 AT 命令。现在的问题是，对于某些命令，我只收到了我应该收到的答案的一部分，但对于其他一些命令，我收到了我应该
c - 接收 SIGTERM
我用c设计了一个消息传递接口(interface)，用于在我的系统中运行的不同进程之间提供通信。该接口(interface)为此目的创建 10-12 个线程，并使用 TCP 套接字提供通信。它工作正
c - 在套接字中发送多个发送/接收
我需要澄清一下在套接字程序中使用多个发送/接收。我的客户端程序如下所示(使用 TCP SOCK_STREAM)。 send(sockfd,"Messgfromlient",15,0);
c++ - 多线程多套接字同时发送/接收
我正在构建一个真正的基本代理服务器到我现有的HTTP服务器中。将传入连接添加到队列中，并将信号发送到另一个等待线程队列中的一个线程。此线程从队列中获取传入连接并对其进行处理。问题是代理程序真的很慢。
json - 接收 JSON 帖子
我正在使用 $routeProvider 设置一条类似的路线 when('/grab/:param1/:param2', { controller: 'someController',
nginx - 接收 HLS 流并重播
我在欧洲有通过 HLS 流式传输的商业流媒体服务器。http://europe.server/stream1/index.m3u8现在我在美国的客户由于距离而遇到一些网络问题。所以我在美国部署了新服
django - 接收 celery 任务中的事件
我有一个长期运行的 celery 任务，该任务遍历一系列项目并执行一些操作。任务应该以某种方式报告当前正在处理的项目，以便最终用户知道任务的进度。目前，我的django应用程序和celery一起坐
Odoo Controller 接收 blob
我需要将音频文件从浏览器发送到 python Controller 。我是这样做的: var xmlHttp = new XMLHttpRequest(); xmlHttp.open( "POST",

首页

博学

6Ren·AI

商城

javascript - 为什么函数 in then 没有接收到对象