FETCH API return undefined

Question

私はFetch APIを使用したいと思いますが、実際にはそれはmecanismではありません。

は私が私のHTMLを持っていると私は結果を割り当てたい私のこのコードをフェッチ：

const weather = "http://api.apixu.com/v1/current.json?key=cba287f271e44f88a60143926172803&q=Paris"; 
const array = []; 

fetch(weather) 
.then(blob => blob.json()) 
.then(data => { 
    array.push(data.current.humidity) 
    console.log(array[0]) 
     } 
); 
document.querySelector('h1').innerHTML = array[0]; 

i「が未定義」はconsole.logしかしリターンで結果を持っています。なぜ説明できますか？

おかげでたくさん

Answer 1

APIの呼び出しは、あなたがそれを書くようなコードをラインでちょうどラインが実行されていないことを意味し、非同期あるためです。コールバックは唯一基本的にあなたが設定しようとすると、

data => { 
    array.push(data.current.humidity) 
    console.log(array[0]) 
} 

実行

document.querySelector('h1').innerHTML = array[0]; 

後だから、arrayはまだ空h1であるあなたのことを意味し、できるだけ早くAPIへの呼び出しが完了したとして実行されます。あなたは、すぐにデータが利用可能であることを設定したい場合は、コールバック関数内でそれをしなければならない。

data => { 
    array.push(data.current.humidity) 

    document.querySelector('h1').innerHTML = array[0]; 
} 

これが最初で奇妙に見えるが、あなたが唯一の匿名関数を登録していることを心に留めておくかもしれませんまだ実行していません。あなたはただ何かが起きるとすぐにトリガーしたい関数を定義します。この場合、APIコールが終了したときです。