为什么 console.log 在承诺循环后工作

Question

我写了一段代码从 API.

中收集一些美国城市的坐标

基本上：

我有一个很大的数组（数据），其中包含一些公司信息，由公司所在的美国州组织
我创建了一个名为 coords 的空数组
我遍历我的大数组，其中所有数据都是为了找到每个州的独特城市
对于每个城市，我从 API 中获取坐标并将其推送到我的数组 coords
循环后，我 console.log 坐标数组，它起作用了。

console.log(coords) 不应该只显示一个空数组吗？

当我尝试做任何其他事情时（例如 JSON.stringify），我得到一个空数组（可能是因为后循环代码在承诺解决之前执行？但是为什么不 console.log ？)

谁能给我解释一下这种奇怪的行为？

// const data = ...allmydata...
let coords = []
const key = 'MYKEY'

for(let state in data){
  coords[state] = []
  // get the list of unique cities
  let cities = [...new Set( data[state].map( x => x['Largest Location'] ) )]

  // this is the fetching loop: for each city name
  // I'm getting the coordinates asynchronously
  cities.forEach( (city) => {
    coords[state][city] = {
      lat: undefined,
      lng: undefined
    }
    let req = `http://open.mapquestapi.com/geocoding/v1/address?key=${key}&location=${city},${state}`
    fetch(req)
    .then( res => res.json() )
    .then( res => {
      coords[state][city]['lat'] = res.results[0].locations[0].latLng.lat
      coords[state][city]['lng'] = res.results[0].locations[0].latLng.lng
    })
    .catch( err => console.log(err) )
  })

}
// out of the loop

// this displays my array nicely structured in the console
console.log(coords)

// this displays []
console.log(coords.map(x => x))

// this displays []
console.log(JSON.stringify(coords))

我不认为它与所有关于为什么值在异步代码中未定义的问题重复（我读过很多），这次值看起来定义在它不应该恕我直言的地方。

提前致谢

Answer 1

我已经在 Firefox 中看过这个，只是为了确保我做对了。

我认为正在发生的事情是，您正在记录数组，但当时它仍然是空的。

然而，从今天开始有了更好的控制台，至少在 firefox 中我不仅得到了变量，而且得到了对变量的引用。

结果出现后，现有变量将被添加到。当我单击小 'expand' 三角形时，我实际上注意到我可以在记录后添加的空数组中看到数据。

为什么 console.log 在承诺循环后工作

Why does console.log work after loop of promises

javascript

loops

asynchronous

promise

console.log