APIから取得したJSONを変数へ格納したい

Question

PHPは書けますがJavaScript初心者です。

PHPではAPIを取得するには以下の様に記述し変数へ格納できます。

<?php
$api = file_get_contents('https://blockchain.info/ticker');
$json = json_encode($api);
?>

では、JavaScriptで以下の様に記述するとvar bcへ格納されません。
thisやselfなども試しましたが格納されませんでした。

var bc;
            
var btc = axios({
                method: 'get',
                url: 'https://blockchain.info/ticker',
                responseType: 'json',
}).then(response =>{
                bc = response.data;
});

console.log(bc);

変数bcへの格納方法を教えていただければ幸いです。

何卒よろしくお願いします。

Comments

[gentaro]

bc = response.data;
の直後に
console.log(bc);
をやったら値取れてるんじゃないっすか。

[sstaishou]

確かにそこでは格納されています。
しかし、そこでしか格納できないとなると、そこのスコープに
すべての処理を記述しないといけなくなって大変不便です。

以下の様にグローバル？にしたいのです。
JSは上への階層へ変数を格納できないものなのでしょうか？

```
var bc;

var btc = axios({
method: 'get',
url: 'https://blockchain.info/ticker',
responseType: 'json',
}).then(response =>{
bc = response.data;
});

var usd = bc.USD
```

[gentaro]

回答はすでに付いてるから書かないけど、とりあえずpromiseについて調べましょう。

Answer 1

もはやPHPのAPI関係ないですよね？
もとのURLがCORSでエラーにならないので非同期処理の問題でしょう。

(async()=>{
  var url="https://blockchain.info/ticker";
  var bc= await fetch(url+"?t="+new Date().getTime()).then(res=>res.json());
  console.log(bc);
})();

Answer 2

exampleのaより抜粋（未検証）

async function func() {
  try {
    const response = await axios({
                method: 'get',
                url: 'URL',
                responseType: 'json',
                });
    return response;
  } catch (error) {
    return error;
  }
}

var bc = func()

困った時はライブラリの配布サイト等、提供元の情報を見れば大抵解決します