[Javascript] 동기와 비동기

동기와 비동기

• 동기 : 순차적으로 코드가 실행됨
• 비동기 : 순차적으로 코드가 실행되지 않음

 

Promise : 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 객체

resolve 키워드를 사용해 실행 순서를 보장

const a () => { //인자로 콜백함수를 받지 않아도 됨
	return new Promise(resolve=> {
		setTimeout(() => {
			console.log(1)		
			resolve() //실행 순서 보장
		},1000)
	})
}

a().then(()=>{ b() })

• 대기 pending : 초기 상태
• 이행 fulfilled : 작업이 성공적으로 안료된 상태를 의미. then을 통해 결과값 반환 가능
• 거부 rejected : 작업이 실패했음을 의미, catch로 에러 처리 가능

 

• 이행 혹은 거부 상태가 되면 더이상 다른 상태로 변화하지 않음(한번만 실행됨)
• 비동기 처리 시점을 명확하게 표현할 수 있다.
• 연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연하다.
• 비동기 작업 상태를 쉽게 확인할 수 있다.
• 코드의 유지 보수성이 증가한다.
• 내부적으로 예외처리 구조가 탄탄하여 오류 처리에 대해 가시적으로 관리할 수 있음

 

async & await

• async & awaitAwait 키워드는 뒤에 있는 비동기 함수의 실행을 기다린다는 의미, Promise 인스턴스가 반환 되어야지만 앞에다가 사용할 수 있음
• 조금 더 코드가 직관적임

const a () => { //인자로 콜백함수를 받지 않아도 됨
	return new Promise(resolve=> {
		setTimeout(() => {
			console.log(1)		
			resolve() //실행 순서 보장
		},1000)
	})
}

cost wrap = async () => {
	await a() //await는 반드시 async로 감싸진 함수 내부에 존재해야 하며 promise 반환값을
	b()
}

wrap()