Javascript 비동기 요청 방식 종류 및 차이 / ajax, fetch 사용법

2023-06-29

비동기 요청 방식 종류

Ajax

Javascript 라이브러리인 Jquery에서 제공하는 서버 요청 함수입니다.
XMLHttpRequest 객체를 이용하여 비동기적으로 서버와 통신하여 새로고침 없이 페이지 일부만 갱신합니다.
Ajax는 fetch API가 나오기 전까지 주로 사용되었습니다.

Promise

Javascript에서 비동기 처리를 다루는 객체입니다.
비동기 작업이 완료되었을 때 결과를 처리하거나 오류를 처리하는 데 사용됩니다.

Fetch

promise 기반으로 서버에 비동기 네트워크 요청을 보낼 수 있는 최신 JavaScript API입니다.
기존의 XMLHttpRequest보다 사용하기 편리한 API를 제공합니다.

Axios

promise 기반의 HTTP 클라이언트 라이브러리입니다.
브라우저 및 Node.js에서 npm install axios로 모듈 설치 후 사용 가능하다는 단점이 있습니다.

ajax 사용법

Jquery로 GET 요청 예시

$.ajax({
    type: "GET",
    url: "/요청URL?파라미터1=값;파라미터2=값",
    dataType: "json",
    cache: false,
    success: function (data) {
        if (data && data.Result) {
            let 변수1 = data.Result.리턴변수명1;
            // 응답 성공 시 코드

        } else {
            // 에러 처리
        }
    },
    error: function (request, status, error) {
        // 요청 실패 시 코드
    }
});

GET 요청에서 파라미터는 json 형식이 아니라, URL 뒤에 ?파라미터1=값 형태로 전달합니다.
dataType: “json”은 서버에서 리턴 값을 json으로 받을 것이 예상된다는 뜻입니다.

Jquery로 POST 요청 예시

$.ajax({
    type: "POST",
    url: "/요청URL",
    contentType: "application/json",
    data: JSON.stringify({
        파라미터1: 값
    }),
    success: function (data) {
        // 응답 성공 시 코드

    },
    error: function (request, status, error) {
        // 요청 실패 시 코드
    }
});

POST 요청에서는 보통 서버에 JSON 형식으로 데이터를 전송합니다.
contentType: “application/json”은 JSON을 문자열로 변환한 data 객체를 전달한다는 뜻입니다.

fetch 사용법

fetch로 GET 요청 예시

fetch('/요청URL?파라미터1=값;파라미터2=값', { method: 'GET'} )
.then((response) => response.json())
.then((data) => {
    if(data.success == true) {
        const 변수1 = data.리턴변수명1;
        // 응답 성공 시 코드

    }else {
        // 응답 실패 시 코드
    }
})
.catch((error) => {
    // 요청 실패 시 코드
    console.log(error);
})
.finally(function () { // 생략 가능
    // 요청 완료 후 무조건 실행하는 코드
});

fetch는 promise 방식이기 때문에 실행 후 리턴 값을 .then으로 받을 수 있습니다.

fetch로 POST 요청 예시

요청 Body에 JSON 데이터 포함하여 전송

fetch('/요청URL', {
    method: 'POST',
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        "파라미터명1": 파라미터,
        "파라미터명2": 파라미터
    })
})
.then((response) => response.json())
.then((data) => {
    if(data.success == true) {
        const 변수1 = data.리턴변수명1;
        // 응답 성공 시 코드

    }else {
        // 응답 실패 시 코드
    }
})
.catch((error) => {
    // 요청 실패 시 코드
})
.finally(function () { // 생략 가능
    // 요청 완료 후 무조건 실행하는 코드
});

요청 Body에 FormData 포함하여 전송

let formData = new FormData();
formData.append("파라미터명1", 파라미터값1);

fetch('/요청URL', {
    method: 'POST',
    body: formData
})
.then((response) => response.json())
.then((data) => {
    if(data.success == true) {
        const 변수1 = data.리턴변수명1;
        // 성공 시 처리

    }else {
        // 에러 처리
    }
})
.catch((error) => {
    // 에러 처리
})

해당 요청의 Content-Type은 multipart/form-data로 설정됩니다.

fetch 동기 처리 방법

async function 함수명() {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('네트워크 에러');
        }
        const data = await response.json();
        // 응답 data 활용 코드
    } catch (err) {
        console.log(err);
    }
}

함수명();

fetch는 기본적으로 비동기 요청 방식이지만, 위와 같이 async await를 사용하면 동기 처리도 가능합니다.

서버 Spring Controller 참고

JSON 요청 받는 예시

@ResponseBody
@PostMapping("/URL")
public Map<String, Object> getPrevContentId(@RequestBody Map<String,Object> paramMap) {
    HashMap<String, Object> resultMap = new HashMap<>();

    try {
        resultMap.put("결과변수명", 서비스명.함수명(paramMap));
        resultMap.put("success", true);
    }catch (Exception e) {
        resultMap.put("success", false);
    }

    return resultMap;
}

@RequestMapping(value = "/URL")
public ModelAndView resetStdTest(HttpServletRequest req, HttpServletResponse res) throws Exception {
    ModelAndView mav = new ModelAndView();

    try {
        String param = req.getParameter("chkStdListStr");

        mav.addObject("결과변수명", 서비스명.함수명(param));
        mav.addObject("success", true);

    }catch (Exception e) {
        mav.addObject("success", false);
    }

    mav.setViewName("jsonView");

    return mav;
}

JSON으로 요청 데이터를 받고, JSON으로 응답 데이터를 보내는 예시들입니다.