비동기 http 통신

JS에서 비동기 http 통신을 위한 방법은 대표적으로 3개(ajax, axios, fetch)가 있다.

ajax

• Asynchronous Javascript And Xml)**
  • 비동기식 자바스크립트와 XML
• 데이터를 이동하고 화면을 구성하는 데 있어 화면 갱신 없이 필요한 데이터를 서버로 보내고 응답을 가져오는 방법
  • 단순히 Web화면에서 어떤 데이터를 부르거나 조회하고 싶을 때 페이지 전체를 새로고침하고 싶지 않을 때 사용

jQuery Ajax

1. 데이터 형식
   (1) csv
   (2) XML
   • 속성과 데이터
   (3) JSON
   • javascript객체 형태로 데이터를 전송
   
   
2. 데이터 전송 방식 → CRUD

• Create (생성) : POST.
• Read (읽기) : GET.
• Update(갱신) = PUT, PATCH
  • PUT: 데이터 전체를 바꾸고 싶을 때
  • PATCH : 데이터의 일부만 수정하고 싶을 때
  • 브라우저 특성상 지원하지 않는 문제가 있어 GET, POST 많이 사용함
• Delete(삭제) = DETELE

  • GET : 단순 데이터 읽기
  • POST : 생성, 변경, 삭제하는 경우
  • GET방식은 URL에 정보가 그대로 담기기때문에 민감한 정보는 GET 방식 사용 XX

function ajaxAct() {
    $.ajax({
                type: "GET", // GET 또는 POST   
                url: 'updatetest.htm', // 서버측에서 가져올 페이지   
                data: 'a=1&b=2&c=3', // 서버측에 전달할 parameter  
                timeout: 5000, // 응답대기시간     
                dataType: 'html', // html , javascript, text, xml, jsonp 등이 있다    
                cache: false, // 캐시가 남아서 갱신된 데이터 못받아 올 경우    
                beforeSend: function() { // ajax 요청하기전에 실행되는 함수    },      
                    success: function(data) { // 정상적으로 완료되었을 경우에 실행된다      
                        dataAct(data); // data 인수에는 return 되어진 data 가 저장되어 있다     },   
                        error: function(request, status, error) { // 오류가 발생했을 때 호출된다.
                            console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
                        }, complete: function() { // 정상이든 비정상인든 실행이 완료될 경우 실행될 함수    

                        }

                    });
            } //이때, success , error, complete 대신에 done, fail, always 를 사용해도 된다.
            $.ajax({
                ~~~~~~~~~~~~
            }).done(function() {
                console.log("요청 성공시 호출")
            }).fail(function() {
                console.log("요청 실패시 호출")
            }).always(function() {
                console.log("성공 실패 상관없이 호출")
            })


// 1. 성공일 경우 : success > complete > done > always
// 2. 실패일 경우 : error > complete > fail > always

axios

• node.js와 브라우저를 위한 promise 기반 HTTP 통신 라이브러리
• 크로스 브라우징에 최적화되어있어 IE11까지 지원
• npm i axios로 설치
• 요청을 중단(request aborting) 시킬 수 있다.
• JSON 데이터 자동변환이 가능
  catch에 걸렸을 때, .then을 실행하지 않고, console창에 해당 에러 로그를 보여줌
• return값은 Promise 객체 형태
• https://sangcho.tistory.com/entry/axios

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
    .then(function(response) {
        // handle success
        console.log(response);
    })
    .catch(function(error) {
        // handle error
        console.log(error);
    })
    .then(function() {
        // always executed
    });

// Optionally the request above could also be done as
axios.get('/user', {
        params: {
            ID: 12345
        }
    })
    .then(function(response) {
        console.log(response);
    })
    .catch(function(error) {
        console.log(error);
    })
    .then(function() {
        // always executed
    });

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
    try {
        const response = await axios.get('/user?ID=12345');
        console.log(response);
    } catch (error) {
        console.error(error);
    }
}

fetch

• promise기반 비동기 HTTP 클라이언트
• JavaScript 내장 라이브러리 → import 안해도 됨
• 사용법은 axios와 거의 유사하고 성능은 fetch가 조금 빠름
• 네트워크 에러가 발생했을 때 기다려야함
  • response timeout API 제공X

Reference

개발공부 임고미:티스토리
ajax랑 axios는 무슨 차이가 있을까?
axios
JavaScript, jQuery,그리고 Ajax