Java Script로 서버 일람을 취득한다 그 2

오류 시 로컬 스토리지 지우기

액세스가 실패하면 다음과 같이 로컬 스토리지를 지우기로 결정합니다.

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가 완료되기를 기다리고 서버 API를 호출하려면 어떻게해야합니까? . .
$.ajax() 의 반환값 jqXHR 에는 .done() 라는 함수가 정의되고 있습니다. 이것은 함수를 인수에 취해, ajax의 처리가 끝난 후에 그 함수를 실행한다고 하는 성질이 있습니다.

그래서 이번에도 이것을 사용하여 token API가 종료되기를 기다리고 server API를 부르기로 합니다.

다만, 모처럼 $.ajax() 의 호출을 함수화했는데, .done() 의 있는 없이 2개 함수를 만드는 것은 조금 기분 나쁘습니다.

그래서 다음과 같이 함수를 변경했습니다.

↓↓↓↓↓↓↓ 당신의 기사의 내용
``js

───────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
───────
html:표시부
↑↑↑↑↑↑↑ 편집 요청 내용

ConoHa API 샘플

``

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 루프에서 돌렸습니다. 다음과 같은 표시가 됩니다. 2개의 서버가 보이네요!



이번 코드는 여기에 있습니다.

개선점

servers API는 서버명 정도 밖에 취할 수 없습니다. 다음 번에는 서버에 대한 자세한 정보를 표시합니다. 또, 도쿄 리전 이외의 서버 정보의 취득에도 도전합니다.