[javascript] Knockout.js에서 RESTful API 호출하는 방법은?

Knockout.js에서 RESTful API를 호출하는 방법은 여러 가지가 있습니다. 이를 위해 jQuery나 Fetch API를 사용할 수 있습니다. 이 예시에서는 jQuery를 사용하여 RESTful API를 호출하는 방법을 설명하겠습니다.

  1. jQuery 라이브러리를 다운로드하고 HTML 문서에 포함시킵니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  1. Knockout.js ViewModel에 API 호출을 위한 함수를 추가합니다.
function MyViewModel() {
  var self = this;
  
  self.data = ko.observableArray([]);

  self.loadData = function() {
    // API 호출
    $.ajax({
      url: 'https://api.example.com/data',
      type: 'GET',
      success: function(response) {
        // API 호출이 성공한 경우 데이터를 ViewModel에 할당
        self.data(response);
      },
      error: function(error) {
        // API 호출이 실패한 경우 에러 메시지를 출력
        console.error('API 호출이 실패하였습니다.', error);
      }
    });
  };
}

ko.applyBindings(new MyViewModel());
  1. HTML에서 해당 함수를 호출할 버튼을 추가합니다.
<button data-bind="click: loadData">데이터 로드</button>
  1. 위의 예시에서 사용한 API 호출은 GET 메서드를 사용했습니다. 필요에 따라 다른 메서드(GET, POST, PUT, DELETE 등)를 사용할 수 있습니다. 또한 API 호출에 필요한 인증이나 요청 데이터 등을 추가로 설정할 수도 있습니다.

이제 Knockout.js에서 RESTful API를 호출하는 간단한 예시를 작성하였습니다. 필요에 따라 API 호출 결과를 동적으로 ViewModel에 바인딩하여 뷰에서 사용하실 수 있습니다.

더 자세한 내용은 Knockout.js 공식 문서를 참고하시면 됩니다.