让JavaScriptES6等待Ajax完成

我正在使用2个API构建一个网站

我正试图让我的谷歌地图初始化等待回复回来

我的代码：

let Url = "https://ipinfo.io/json";
async function getInfo(url) {
  const response = await fetch(url);
  // console.log(response);
  const data = await response.json();
  return data;
}
let ipInfo = getInfo(Url);
console.log(ipInfo);

//Google maps
function initMap() {
  var place = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: place
  });
  var marker = new google.maps.Marker({
    position: place,
    map: map
  });
}

现在如何使initMap（）等待getInfo（）完成？我在尝试类似的东西

let ipInfo = getInfo(Url).then(function(){initMap()...Rest of code});

---

但是它没有等待

因为您使用的是

异步

和

等待

，所以您应该能够：

let ipInfo = await getInfo(Url);
// rest of code using ipInfo

如果您想使用

Promise

格式，那么您所拥有的应该可以：

getInfo(Url)
  .then(info => {
    initMap();
    // more code
  });

只知道它不会将值返回给变量

如果这不起作用，很可能是您有某种语法错误

let Url=”https://ipinfo.io/json";
异步函数getInfo（url）{
const response=等待获取（url）；
返回response.json（）；
}
（异步函数main（）{
让ipInfo=等待获取信息（Url）；
console.log（ipInfo）；
})(); // 使自动运行

查看异步结构，将其全部放在同一个函数中似乎是有意义的：

let Url = "https://ipinfo.io/json";

//Google maps
async function initMap(url) {
  const response = await fetch(url);
  // console.log(response);
  const data = await response.json();
  var place = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: place
  });
  var marker = new google.maps.Marker({
    position: place,
    map: map
  });

  return map;
}

initMap(Url).then(map => { /* Do the rest of your stuff */ })

---

至于为什么会提前触发，我会确保您等待的两件事情实际上都返回了承诺或异步函数。

为什么要等待？…在发出请求时初始化映射，然后在收到相同的请求后更新位置。我怎么能告诉它在到达这里后发送数据？若我不这样做，那个么它将只是在initMap中进行未定义的请求，并存储对map对象的引用，以便在收到数据后可以添加标记、设置中心等。另外，使用ipinfo不如使用navigator获得用户当前位置准确，您能给我一个代码示例吗？我有点迷路了。互联网上到处都有很多例子，真奇怪。因为我正在做的是让ipInfo=getInfo（Url）；console.log（ipInfo）；并且console.log是

Promise{：“pending”}

。所以它在运行，即使它应该等待，它也在返回一个承诺。如果console.logged在函数中，我会得到一个对象（这就是我想要的）。知道如何修复它吗？请确保这样做

让ipInfo=wait-getInfo（Url）

。如果您没有

等待

，它将返回承诺。（要完成wait，您必须像我在第一个示例中所做的那样，将其封装在函数中）。在我的示例中使用任何一种方法都会将承诺更改为值。

await仅在异步函数和异步生成器中有效

是的，您必须像我在第一个示例中所做的那样将其包装到函数中。这是一个自动执行的异步函数。仔细看看。