Callback 과 Promise 그리고 Async,await

 

js는 동기적 처리 방식으로 위에서 아래로 순차적으로 읽어 내려간다

 

console.log('1');

setTimeout(function() {
	console.log('2');
}, 1000);

console.log('3');

 

위에서 부터 순차적으로 1,2,3번을 매겼지만 실제 출력은 1,3,2 순으로 될것이다.

 

비동기적으로 처리하는것은 효율성에 있어서 매우 큰 핵심 요소이며 

 

callback -> promise -> async,await 로 발전해 왔다

 

 

먼저 콜백이란 

 

js에서의 callback 함수는 다른 함수의 인자로써 이용되는 함수 라고 정의 되어있다

 

function getData(callbackFunc) {
	$.get('https://main.com', function(response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

getData(function(tableData) {
	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

 

하지만 여러 작업을 계속해서 처리하려고 하면 콜백 안에 콜백을 계속 무는 형식으로 작성되어야해서

 

이를 콜백지옥이라고 한다

 

 

이를 위해 Promise 가 등장하게 되었고 조금더 간편해졌다

 

프로미스는 new Promise()로 생성하고 종료시 까지 Pending(대기), Fulfilled(이행),Rejected(실패)의 상태를 갖는다

 

function getData() {
  return new Promise(function(resolve, reject) {
    let data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

 

 성공시에는 resolve를 통해 받아온다

 

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

실패시에는 reject를 통해 error 메시지 전달

 

 

프로미스 체이닝은 여러개의 프로미스를 then으로 호출하면 새로운 프로미스가 반환되어 계속 이어나간다

 

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(1);
  }, 2000);
})
.then(function(result) {
  console.log(result); // 1
  return result + 10;
})
.then(function(result) {
  console.log(result); // 11
  return result + 20;
})
.then(function(result) {
  console.log(result); // 31
});

 

 

다음은 async와 await로 

 

async function 함수명() {
  await 비동기_처리_메서드_명();
}

기본 문법은 이렇게 된다 

 

await는 async 내부에서만 사용 가능하고 그렇지 않다면 오류를 낸다

 

async function good(){
	const result1=await v1();
	const result2=await v2(result1);    
	const result3=await v3(result2);
    }
good();

 

async function good(){
	const result=await Promise.all([v1(),v2(),v3()])
    }
good();

Promise.all을 통해 배열로 반환할수 있다

 

 

 

 

출처:

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

 

https://www.youtube.com/watch?v=Uh8u20MD978