ブラウザのresponseにはaxiosでデータが取れているのが確認できるが、consoleで出すと、空になっている

Question

実現したいこと

・Vueの処理でデータをaxiosで取得したい

発生している問題・エラーメッセージ

browserのレスポンスには、データが返ってきているが、axiosからのレスポンスには
dataが空になっている。

エラーなし

該当のソースコード

const uri = parseUri(window.location.search);
const query = queryToObject(uri.query);


try {
	if (!query.id.match(/^\d+$/)) {
		throw new Error("Invalid parameter");
	}

	var res_data;
	// 非同期でデータ取得
	axios({
		method       : 'GET',
		url          : 'data.json',
		responseType : 'json'
	}).then(function (response) {
		res_data = response.data;
　　　　　 //ここが空になる
		console.log(res_data)
	}).catch(function (error) {
		console.log(error);
	});
} catch (e) {
	console.log(e);
}

{

"0001": 
  {
    "id": "0001",
    "number": "-asd-1",
    "name": "",
    "pf_type_id": "",
    "pf_type_name_j": "",
    "position": "5840558834058034860586805068506",
    "pictures": [
      "/file/test1.jpg",
      "/file/test2.jpg",
      "/file/test3.jpg",
      "",
      "",
      ""
    ],
    "pf_files": [
      
      {
        "pf_file": {
          "date": "2007年3月29日" ,
          "title": "testのお知らせ" ,
          "path": "/file/testtestetst.jpg",
          "size": "18.3KB",
          "icon": "pdf",
          "icon_upper": "PDF"
        }
      },
      
      {
        "pf_file": {
          "date": "2007年3月29日" ,
          "title": "testのお知らせ" ,
          "path": "/file/testtestetst.jpg",
          "size": "18.3KB",
          "icon": "pdf",
          "icon_upper": "PDF"
        }
      },
      
      {
        "dummy": ""
      }
    ],
  }
}

試したこと

ファイルパスをフルパスにする。
axiosの指定を試す

補足情報（FW/ツールのバージョンなど）

※見えてはいけないデータは変更していますので、画像と一致しない部分はあります。
レスポンスがbrowserでは返ってきているのに、vueでは取れない

Comments

[yuki55snowman]

responseTypeを消したら動きました。jsonでない？？

Answer 1

responseTypeを指定した場合はJSON化するので、それをオブジェクトに返すためにはJSON.Parseが必要なはずです。

responseType: 'text' return Json Object

あと、axiosをVueで使う場合は以下の書き方で問題ないはずです。

axios.get( 'data.json').then(function (response) {
　console.log(response.data)
})

Answer 2

では返ってきているのに、vueでは取れない

そりゃそうでしょうね。戻ってきたものを17行目でvueに渡しているつもりなのでしょうが、設定した先は10行目で定義している変数 res_data。vueに渡しているようにはみえない。そりゃ「vueでは取れない」でしょう。

9
10	var res_data;
11	// 非同期でデータ取得
12	axios({
...
16	}).then(function (response) {
17		res_data = response.data;

Answer 3

axiosの場合はresponse.dataに実際のデータが入っています。
わざわざres_dataのように代入しているわけですから、それを使いましょう。

res_data = response.data;
console.log(res_data)