Question

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

我试图让我的Google Maps init等待回复回复。

我的代码：

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

但它没有等待

Answer 1

由于您使用的是async和await，因此您应该可以：

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

如果您想使用Promise格式，那么您应该使用的是：

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

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

如果这不起作用，很可能会出现某种语法错误。

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

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

Answer 2

看看异步结构，将它们全部放在同一个函数中似乎是有道理的：

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 */ })

至于为什么它会提前解雇，我确保你正在等待的两件事实际上都是返回承诺或异步函数。

制作vanilla JavaScript ES6等待Ajax完成

2 个答案: