バニラJavaScript ES6をAjaxが終了するまで待ちます

Question

私は2つのAPIを使用してウェブサイトを構築しています。

私のGoogleマップ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（）が終了する）（G​​ETINFO待つ作るのですか？私は

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

ような何かをしようとしていた。しかし、それはあなたがasyncとawaitを使用しているので、あなたが行うことができるはず

Answer 1

を待ちませんでした：

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

使用したい場合

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

の形式で Promise形式を使用してください。値を変数に返さないことが分かります。

これでうまくいかなかった場合は、何らかの構文エラーが発生している可能性が非常に高いです。非同期構造を見てみると

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

fまたはなぜ早く発射するのか、私はあなたが待っているものの両方が実際に約束または非同期の機能を返すことを確認するでしょう。