[js] REST API 호출 종류

 JS 환경에서 비동기 HTTP 통신 방식은 AJAX, Axios, Fetch 가 있다.

 

1. AJAX

    1) 특징

        *  jQuery 라이브러리를 import 해야됨 

        *  Error, Success, Complete의 상태를 통해 실행 흐름 조절 가능

    2) 클라이언트(html) 설치

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    3) 문법 구성

$.ajax({   type : "GET",   url : "ajaxData.jsp?type=1",   dataType : "text",   error : function(){      alert('통신실패!!');   },   success : function(data){      alert("통신데이터 값 : " + data) ;      $("#dataArea").html(data) ;   } });

 

2. Axios

    1) 특징

        * Promise로 반환함 

        * 브라우저와 Node.js에 모두 작동 

        * axios 라이브러리를 import 해야됨

        * 브라우저 호환성이 뛰어남

    2) 클라이언트(html) 설치

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    3) 문법 구성

axios({   url: 'https://test/api/cafe/list/today', // 통신할 웹문서   method: 'get', // 통신할 방식   data: { // 인자로 보낼 데이터     foo: 'diary'   } });

 

3. Fetch API

    1) 특징

        * ES6부터 들어온 JavaScript 내장 라이브러리

        * 자바스크립트의 내장 라이브러리 

        *  Promise로 반환함 

        * 네트워크 에러 발생 시 response timeout이 없어서 기다려야함

    3) 문법 구성

fetch('https://www.fruityvice.com/api/fruit/all') .then(res => res.json()) .then(data => console.log(data));