vue.js axios.getで格納したデータが消える

typescript
1 created: function () {
2                var data: any[] = new Array();
3
4                axios.get(url)
5                    .then(function (response) {
6                        data = JSON.parse(response.request.response);
7                        console.log(data);//ここではdataに値が格納されてるのに
8                       
9                    })
10
11            
12
13                console.log(data);//ここでは空になっている
14              
15            },

vue.jsのcreatedに上記コードを書きました。axiosを使ってapiからjsonを取得したのですが、
一番下のdataでは空になってしまいます。
解決策を教えてください(>_<)

typescript
1
2data: {
3              
4                data: []
5
6            },
7
8 created: function () {
9                var self = this;
10
11                axios.get(url)
12                    .then(function (response) {
13                        self.data = JSON.parse(response.request.response);
14                        console.log(self.data);//ここではdataに値が格納されてるのに
15                       
16                    })
17
18            
19
20                console.log(self.data);//ここでは空になっている
21              
22            },

行動規範の内容に同意します

回答1件

ベストアンサー

axios.getは非同期処理なので、axios.get(url)呼び出し後、すぐ(通信結果を受け取る前)に

console.log(data);//ここでは空になっている

に行くために、空になります。

https://azu.github.io/promises-book/#introduction
でpromiseを理解していけばよいかと思います。

※async awaitもついでに理解すればなお良いと思いますので
https://qiita.com/soarflat/items/1a9613e023200bbebcb3
も参考にしてください(promiseを理解してからのほうがわかりやすいかと思います)

※どうしてもthen部分ではやりたくなくて、created関数の部分でやりたいようなので、それっぽく動くasync await使った書き方だと

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
6<script src="https://cdn.jsdelivr.net/npm/vue"></script>
7<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
8
9</head>
10<body>
11  <div id="app">
12    {{ response }}
13  </div>
14</body>
15<script>
16var app = new Vue({
17  el: '#app',
18  data: function() {
19    return({
20      response: {
21      },
22    });
23  },
24  created: async function() {
25    var res = await axios.get('http://hogehoge/');
26    console.log(res);
27    this.response = res.data;
28  },
29});
30</script>
31</html>

こうだけど、Chromeじゃないと動かない(async await対応ブラウザじゃないと動かないorトランスパイル)

投稿2018/01/12 02:16

編集2018/01/12 03:31

rururu3

総合スコア5545

退会済みユーザー

2018/01/12 02:26

ありがとうございます。今読んでいる途中なのですが、解決策はないのでしょうか(T___T) axiosのメソッドの外にはデータはもっていけないのでしょうか(T____T)

rururu3

2018/01/12 02:35

解決策書いてませんでしたが、外に出さないといけない必要性がわからないので、axiosメソッド内で処理すればいいのではと思うのですが。もしくはcreated関数でvar self = this;でvueクラスを保存しておいてaxiosメソッド内でselfを使ってvueのdata部分に通信結果を入れるとかでもいいかと

退会済みユーザー

2018/01/12 02:47

しかし、Promiseでは promise.then で登録する段階でpromiseの状態が決まっていても、そこで登録したコールバック関数は非同期で呼び出される仕様になっています。そのため、<2> が先に呼び出されて、最後に <3> のコールバック関数が呼ばれています。難しいです(T___T) 非同期ってのが何なのかそもそもよくわからなくて辛いです

退会済みユーザー

2018/01/12 02:50

コードを追加しました。selfを加えたのですがやっぱり空になってしまいます。外に出してやりたい処理があって…

rururu3

2018/01/12 02:54

selfを付けたからといってもからなのは違いないですが、axiosメソッド内でデータを入れるので、vuejsのリアクティブが働くはずですよ

退会済みユーザー

2018/01/12 06:39

できました！ありがとうございます！(>___<)

行動規範の内容に同意します