时间戳

首页 > 解决方案 > 如何使用带有异步获取的for循环返回数组

javascript - 如何使用带有异步获取的for循环返回数组

问题描述

我正在尝试从 fetch 请求中创建一组响应，但我不确定我在循环中放置的 await 哪里出了问题。console.log(response)给出 TypeError: undefined is not an object，当我尝试时，console.log(resp)我得到一个 console.error

const routesArray = async (userLocation, arr) => {
    let result = [];
    let temp = [];
    temp.push(userLocation);
    const updated = temp.concat(arr);


    let origin = updated[0].lat + "," + updated[0].long;
    let destination = updated[updated.length - 1];
    for (let i = 0; i < updated.length; i++) {
        let resp = await fetch(
            "https://maps.googleapis.com/maps/api/directions/json?origin=" +
                origin +
                "&destination=" +
                destination +
                "&key=" +
                GOOGLE_MAPS_API_KEY +
                "&mode=transit&region=sg"
        );
        let response = await resp[0]["routes"][0]["legs"][0]["steps"]
        console.log(response);
        result.push(response);
    }
    return result
};

标签： javascriptreactjsasync-await

解决方案

代替：

await resp[0]["routes"][0]["legs"][0]["steps"]

和

(await resp.json())[0]["routes"][0]["legs"][0]["steps"]

或者为什么不：

(await resp.json())[0].routes[0].legs[0].steps

这是必需的，因为resp它是一个尚未公开数据的响应对象。为此，您必须调用它的一个异步方法，例如json()，它返回自己的承诺。

顺便说一句：你得到的错误不是在console.log(response)，而是在上面的行。

如果您仍然遇到错误，请确保您的数据结构符合您的预期：

console.log(JSON.stringify(await resp.json()));

这将向您显示数据。确保它是一个数组。如果不是，则需要相应地调整代码，因为该[0]部分将失败。

推荐阅读