Promise, async-await

 

비동기

-> 특정 코드의 실행이 완료되기 전까지 기다리지 않고 다음 코드를 먼저 수행하는 특성

 

동기

-> 작업이 끝나야 비로소 다음 예정된 작업을 할 수 있음

 

 

 

 

Promise

 

자바스크립트의 비동기 처리를 위해 사용되는 객체

콜백 함수의 error, success 의 처리를 보다 간단하게 하기 위해 생김

 

 

 

 

 

 

 

 

promise의 3가지 상태

 

Pending(비동기 처리 로직이 아직 완료 되지 않은 상태)

Fulfilled(처리가 완료되어 프로미스가 결과값을 반환한 상태)

Rejected(처리가 실패하거나 오류가 발생한 상태)

 

실패시 처리 결과값을 catch()로 받을 수 있음

 

 

 

 

 

async / await

 

async function f() {
  return Promise.resolve(1);
}

f().then(alert);

async function f() {
  return 1;
}

f().then(alert);

 

Function 앞에 async 를 붙이면 항상 프로미스를 반환한다. 프로미스가 아닌 값을 반환하더라도 이행상태의 프로미스로 감싸서 이행된 프로미스가 반환되도록 한다.

 

 

 

await

let value = await promise;

 

 

js는 await를 만나면 프로미스가 처리될때까지 기다린다.

프로미스가 처리되기 동안에 엔진이 다른 일을 하지 않기 때문에 CPU 리소스가 낭비되지 않는다.

 

await 는 async 함수 안에서만 작동하고 최상위 레벨 코드에선 작동되지 않는다.

 

 

 

async / await 의 예외처리

 

try / catch 를 사용한다

 

const test = async () => {
	try {
    	console.log("start");
        await timer (2000)
        console.log ("End")
    } catch (err) {
    	console.error(err)
    }
};

 

네트워크 통신 오류 뿐만 아니라 간단한 타입의 오류까지 잡아낼 수 있다

 

 

 

 

async / await 의 활용

 

const userInfo = async id => {
	try {
    	let user = await user.find(id);
        user.name = 'eun';
        user = await user.save();
    } catch (err){
    	console.error(err)
    }
};

userInfo('wecode')

 

사용자의 데이터를 받아와 수정하고 저장할 때의 코드가 있다고 했을 때, 이렇게 활용할 수도 있다

 

 

 

 

 

정리

 

js는 동기방식임

비동기 방식으론 콜백함수, promise, async-await 3가지 비동기 방식이 존재함

 

콜백함수는 여러개 중첩되어 있을 땐 코드를 보기 어렵고 유지보수도 힘들어짐

그래서 이를 해결하기 위해 promise가 생김

promise 는 가까운 미래에 얻을 수 있는 데이터에 접근하기 위한 방법을 제공함