Vue.jsでSPA - [6] サーバからのデータ取得

## 取得方法を調べる

JSでのサーバからのデータ取得方法はいくつか種類がかあるみたい．ざっと調べただけで以下

1. XHR `XMLHttpRequest` : 昔ながらの方法でローレベルを書く感じ
2. `fetch` API : 比較的新しい．Chromeでいうとversion 42かららしい
3. Ajaxライブラリを使う : `jQuery`, `superagent`, `axios`などあげるとキリがない感じ


## Vueの推奨は?

公式サイトでは、**まあ、なんでもいいけど`axios`**でどう？っていう感じの書き方 ．`vue-resource`のリタイアに関する記事で2016年なので少しふるいかもだが．

>What Should I Use Then?
You are free to pick whatever you prefer (even just $.ajax), but as a default recommendation — particularly for new users — we suggest taking a look at Axios. It’s currently one of the most popular HTTP client library and covers almost everything vue-resource provides with a very similar API. In addition, it is universal, supports cancellation, and has TypeScript definitions.


## それぞれ触ってみる

コマンドラインでさっとやりたかったので`node`つかう（あとで逆にめんどくさいことに気づく）

### XHR

事前に`axios`パッケージたしておく. 

```javascript
const axios = require('axios');

let url = 'https://api-staging.megaport.com/v2/locations'

axios.get(url)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
```

### fetch

事前に`node-fetch`パッケージたしておく．`fetch`の返り値は`Promise`オブジェクト

```javascript
var fetch = require("node-fetch");

let url = 'your-api-end-point-here';

fetch(url).then((response) => {
  //console.log(response.status);
  console.log(response);
}).catch(() => {
  console.log("error caught!");
});
```

[Hack Your Design!](https://blog.toshimaru.net/new-xhr-fetch-asyncawait/) によるとこっちの`await`を使う書き方がよりモダンとのこと

```javascript
var fetch = require("node-fetch");

let url = 'your-api-end-point-here';

(async() => {
  try {
    const response = await fetch(url);
    //console.log(response.status);
    console.log(response);
  } catch (e) {
    console.log("error!")
  }
})();
```

### axios

```javascript
const axios = require('axios');

let url = 'your-api-end-point-here'

axios.get(url)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
```

`node`でやらなくても，`Chrome DevTools`の`console`に上記をはりつければ動くし，そのほうが`node`の準備いらないので簡単だったのかぁ

## ハマったところ

`fetch`は`Promise`を返してくるのだが，この場合にどうやって`data`にアクセスするのかがよくわからず小ハマり．ひとまず`response`をJSONにしてみる．

```javascript
fetch(url).then((response) => {
	console.log(response.json()); // to JSON
}).catch(() => {
	console.log("error!");
});
```
ここで`Promise`の返す値をVueで`data`配列にほりこもうとすると以下のようにおこられる．

```
[Vue warn]: Invalid prop: type check failed for prop "data". Expected Array, got Promise.
```

`Promise`の中身を確認すると以下のようになっていて`data`は`[[PromiseValue]]`の下に配列としてある．ドット表記ではアクセスできない．

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32540/e56c8191-a934-4187-ab89-b524453dfac4.png)


アクセス方法は[stack overfow](https://stackoverflow.com/questions/28916710/what-does-promisevalue-mean-in-javascript-console-and-how-to-do-i-get-it)で見つけた．`then`を使う．

```javascript
fetch(url)
	.then(response => response.json())
	.then(data => console.log(data)) // then で data にアクセス
    .catch(error => console.error(error))
```

## 参考にしたサイト

- [Hack Your Design! - JavaScriptのXHRの送り方いろいろ: XMLHttpRequest, fetch, async/await](https://blog.toshimaru.net/new-xhr-fetch-asyncawait/)
- [Qiita - お疲れさまXMLHttpRequest、こんにちはfetch](https://qiita.com/tomoyukilabs/items/9b464c53450acc0b9574)
- [ReferenceError: fetch is not defined](https://stackoverflow.com/questions/48433783/referenceerror-fetch-is-not-defined)
- [stack overflow - What does PromiseValue mean in javascript console and how to do I get it](https://stackoverflow.com/questions/28916710/what-does-promisevalue-mean-in-javascript-console-and-how-to-do-i-get-it)


## 次回

サーバからの値とれたので，でいよいよ`Vue`の中でつかっていくでぇ


## シリーズ

- [Vue.jsでSPA - [1] Element UIでベースの画面をつくる](https://qiita.com/narutaro/items/50d0e4714f93279502c9)
- [Vue.jsでSPA - [2] Element UIで各ペインの画面をつくる](https://qiita.com/narutaro/items/9abbf7881f692c985484)
- [Vue.jsでSPA - [3] vue-routerでルーティング ](https://qiita.com/narutaro/items/74178f4ea031b0ccfa44)
- [Vue.jsでSPA - [4] コンポーネントにしてみる ](https://qiita.com/narutaro/items/df793bb34129d113d9f2)
- [Vue.jsでSPA - [5] リアクティブになってる？](https://qiita.com/narutaro/items/bed4eab6e53e3b46c0b2)
- [Vue.jsでSPA - [6] サーバからのデータ取得](https://qiita.com/narutaro/items/82f4d9635c398524431c)
- [Vue.jsでSPA - [7] Vueからサーバデータ取得](https://qiita.com/narutaro/items/91da194788318c226e0e)
- [Vue.jsでSPA - [8] バックエンドとうまくやっていこうとして試したこと](https://qiita.com/narutaro/items/3b7135eed8f6e930a0e6)
- [Vue.jsでSPA - [9] 今更ながらCORSとそのエラーの回避方法](https://qiita.com/narutaro/items/26e4cbec386bc054bbd7)
- [Vue.jsでSPA - [10] Safari..お前か...3rd party cookie](https://qiita.com/narutaro/items/e53f653d73a6934046d0)
- [Vue.jsでSPA - [11] Element UIでログイン画面](https://qiita.com/narutaro/items/010009c0198371fee658)
- [Vue.jsでSPA - [12] ログイン：シングルペインからツーペインへ画面遷移](https://qiita.com/narutaro/items/fca953b3b2ed5c63360c)
- [Vue.jsでSPA - [13] モバイル向けに OnsenUI に手をだす](https://qiita.com/narutaro/items/bdc0e25c22369466bed3)
- [Vue.jsでSPA - [14] Vue.jsとOnsenUIを使ったオレオレなショッピングカートチュートリアル](https://qiita.com/narutaro/items/9502b90b565366911c57)
- [Vue.jsでSPA - [15] 世界中の人とミーティング時間を決める時に便利なやつ](https://qiita.com/narutaro/items/d6431f54050504bf1551)
- [Vue.jsでSPA - [16] へー、FirebaseでWebアプリのログインってこうやるのか](https://qiita.com/narutaro/items/3c37fe6c3b19a6143a07)