エラー時にローカルストレージを消す

アクセスに失敗したら以下のようにローカルストレージを消すことにします。

var access = function(url, data, type, onSuccess) {
    $.ajax({
      url: url,
      data: JSON.stringify(data),
      type: type,
      headers: {
        'X-Auth-Token' : window.localStorage['token']
      },
      success: onSuccess,
      error: function() {
        console.log('$.ajax error. remove token in local storage.');
        window.localStorage.removeItem('token');
      }
    });
}

これにより、例えばトークンの機嫌が切れていた際には以下の様なフローとなります

localStorageにトークンが保存されているためservers APIにアクセス
errorが実行
トークン削除
次回アクセス時にtoken APIを実行

エラー発生時に再度トークンを取得する処理でも良いですが、その場合は無限ループにならないよう気をつける必要があります。

token API後すぐにservers APIを呼びたい

そう思って以下の様な処理にするとservers APIの呼び出しに失敗します。

access(token_url, token_data, token_type, tokenOnSuccess);
access(servers_url, servers_data, servers_type, serversOnSuccess);

これは$.ajax()が非同期に行われるためです。つまり、token APIを呼び出すと結果が返ってくるのを待たずににservers APIを呼びに行きます。この時まだトークンが得られていないためエラーとなります。

では、token APIの完了を待ってservers APIを呼ぶにはどうすればいいのでしょう。。。

$.ajax()の戻り値jqXHRには.done()という関数が定義されています。これは関数を引数に取り、ajaxの処理が終わったあとにその関数を実行するという性質があります。

なので今回もこれを使ってtoken APIが終了するのを待ってserver APIを呼ぶことにします。

ただし、せっかく$.ajax()の呼び出しを関数化したのに、.done()のあるなしで２個関数を作るのはちょっと気持ち悪いです。

そこで以下のように関数を変更しました。

↓↓↓↓↓↓↓ あなたの記事の内容


───────
```js
↑↑↑↑↑↑↑ 編集リクエストの内容
var access = function(url, data, type, onSuccess) {
    return $.ajax({
      url: url,
      data: JSON.stringify(data),
      type: type,
      headers: {
        'X-Auth-Token' : window.localStorage['token']
      },
      success: onSuccess,
      error: function() {
        console.log('$.ajax error. remove token in local storage.');
        window.localStorage.removeItem('token');
      }
    });
}

前回との違いは$.ajax()の前にreturnがついたことです。これにより呼び出し側で$.ajax()の戻り値に.done()で処理が書けます。具体的には以下のようになります。

$(function(){
  if (window.localStorage['token'] === undefined) {
    access(token_url, token_data, token_type, tokenOnSuccess).done(function() {
      access(servers_url, servers_data, servers_type, serversOnSuccess);  
    });
  } else {
    access(servers_url, servers_data, servers_type, serversOnSuccess);  
  }
});

これでtoken APIの後にservers APIを呼び出せるようになりました。

見た目を変える

さて、受け取ったサーバ情報をJSONのまま出力するのも味気ないので、tableにしてみます。

↓↓↓↓↓↓↓ あなたの記事の内容

───────
```html:表示部
↑↑↑↑↑↑↑ 編集リクエストの内容
<h2>ConoHa API sample</h2>
<table id="server_table">
</table>

var serversOnSuccess = function(data) {
  console.log(data);
  for (var i = 0; i < data.servers.length; i++) {
    var tr = $('<tr>');
    var td_index = $('<td>').text(i);
    var td_name = $('<td>').text(data.servers[i].name);
    tr.append(td_index).append(td_name);
    $('#server_table').append(tr);
  }
}

serversのJSONデータには配列が入っているのでforループで回しました。以下の様な表示になります。２個のサーバが見えていますね！

今回のコードはここにあります。

改善点

servers APIはサーバ名ぐらいしか取れません。次回はサーバの詳細情報を表示します。また、東京リージョン以外のサーバ情報の取得にも挑戦します。