[JavaScript] AJAX (fetch,axios,비동기처리)

1. 동기 vs 비동기

동기와 비동기를 나누는 가장 큰 차이점은 어떻게 실행 순서를 가지는 지에 있다.

동기적 방식은 발생하는 하나의 이벤트가 모두 끝나야 다음 이벤트를 처리할 수 있는, 실행 순서가 확실한 방식이고

비동기적 방식은 연속적으로 발생하는 이벤트를 담은 후, 완료되는 순서대로 일을 처리하는 실행 순서가 확실하지 않은 방식을 말한다.

 

2.AJAX란?

JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML데이터를 주고받는 기술을 의미한다.

XMLHttpRequest 객체를 이용해 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다.

ajax사용 이전과 이후의 방식 비교

3. Ajax 구현방식 - fetch

• javascript 내장 라이브러리로 imprt할 필요가 없다.
• return 값은 Promise 객체 형태이다.

4. Ajax 구현방식 - axios

• javascript 라이브러리 npm i axios
• return 값은 fetch와 동일한 Promise 객체 형태이다.

++ 비동기방식의 문제점

비동기의 장점은 효율성이다.

하나의 작업을 기다렸다가 다음 다음작업을 하는 것이 아니라 blocking이 일어나면 web API에 콜백과 함께 보내지며 다음 이벤트를 실행한다.

 

그리고 web API에서 완료된 작업은 callback queue에 보내져 작업된 결과를 다시 실행한다.

[이 부분을 자세하게 알고싶다면 자바스크립트 엔진 글 항목에 가면된다]

 

하지만 만약에 ajax의 응답값이 다음 함수의 parameter(데이터)로 들어가야 할 경우, 다음 함수의 요청에 대한 응답을 기다리기 전에 처리해 버린다면? 원하는 결과를 얻지 못할 수도 있다.

이를 위해 비동기처리를 하는 것이다.

 

5. 비동기처리

[자바스크립트 언어의 비동기 처리방식 3가지]

1) 콜백함수

다른 코드의 인수로서 넘겨주는 코드

비동기적인 자바스크립트의 코드 방식에 콜백함수를 사용하여 비동기적 방식을 순차적으로 실행할 수 있게 해준다.

 

문제점

• 가독성이 매우 떨어진다
• 모든 콜백에서 에러 핸들링을 해줘야 한다.

2) Promise

코드를 리턴하는 함수를 Promise 객체 안에 넣고, 리턴하는 부분에 then()메소드를 넣어 결과값이 리턴되어야만 다음작업을 실행하게 한다.

 

Promise는 new 키워드로 생성할 수 있으며 총 4개의 상태값을 가진다.

 

• Pending: 아직 결과 값이 반환되지 않은 진행 중인 상태
• fulfilled: 성공
• Rejected: 실패 
• ettled: 결과 값이 성공 혹은 실패로 반환된 상태

상태 값은 크게 Pending과 Settled로 나눌 수 있고, Settled된 값은 재실행 할 수 없다.

    1.생성

    2.사용

   인스턴스 호출 시 대표적으로 then, catch 메소드를 이용한다.

   resolve시 then /   reject시 catch를 사용한다.

 

 

3) async await

Promise의 문제점(then() 메소드의 연쇄호출)을 보완하고 코드의 가독성을 높여준다.

여기서 주의해야 할 점은 async await은 Promise를 단순히 대체하는 것이 아니라는 것이다.

Promise를 사용하지만 then, catch 메소드를 사용하여 컨트롤하는 것이 아닌 동기적 코드처럼 반환 값을 변수에 할당하여 작성할 수 있게끔 도와주는 문법이다.

 

await키워드는 async 함수에서만 사용이 가능하고 async함수가 아닌 곳에서 사용시 SyntaxError가 발생한다.

 

 

 

<참고>

taeny.dev/javascript/15%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8xajax/#1-2-ajax-%EA%B5%AC%ED%98%84%EB%B0%A9%EC%8B%9D--1-fetch

15) 자바스크립트 X AJAX -1 (fetch, axios, callback, promise, async await)

 

velog.io/@yejinh/%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0

자바스크립트 비동기 처리 방식