비동기(Asynchronous)

성민개발로그·2022년 2월 19일
0

자바스크립트

목록 보기
10/11
post-thumbnail

AJAX란?

자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식이다.

Promise란?

const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행한다.

  if (/* 비동기 작업 수행 성공 */) {
    resolve('result');
  }
  else { /* 비동기 작업 수행 실패 */
    reject('failure reason');
  }
});

비동기처리를 위해서 사용되는 패턴이다. callback 함수를 보완하기 위해서 나온게 Promise다 es6부터 사용하기 시작했다

Promise는 생성자 함수를 통해서 인스턴스화를 한다.(Pending 상태)

비동기처리 성공하면 resolve메소드를 호출해서 비동기 처리 결과를 후속처리 메소드로 전달한다.(Fulfilled)

비동기처리 실패하면 reject메소드를 호출해서 에러메시지를 후속처리 메소드로 전달한다.(rejected)

후속처리 메소드는 then과catch가 있다. 둘다 프로미스를 반환한다.

then 을 가지고 메소드 체이닝을 통하여서 콜백헬 문제를 해결한다.

Async,await ?

Promise를 더욱 쉽게 사용할 수 있도록 ES2017(ES8) 문법이다.

const asyncFunc = async function (){
 try{
	//비동기처리
 }catch{
   //비동기 처리 실패 에러처리
 }
  
}

함수의 앞부분에 async 키워드를 추가하고, 함수 내부에서 Promise의 앞부분에 await 키워드를 사용한다.

async, await를 사용할 경우 코드가 간결해지지만, 에러처리를 잡기 위해 try catch를 사용해야한다. 동기적인 코드흐름으로 개발이 가능하다.

0개의 댓글