동기/비동기[2021.08.31]

김정훈·2021년 8월 31일
0

javascript

목록 보기
17/19

1. 동기/비동기

자바스크립트는 항상 동기식 처리!

1. 동기식처리(synchronous)
  - 한번에 코드 한줄씩 차례차례 실행됨을 의미함

2. 비동기처리(asynchronous)
  - setTimeout(), addEventListener()와 같은 함수를 만나면 
    특수한 코드들을 발견하면 약간 제쳐두고 다른 코드부터 실행 
  - 자바스크립트 실행을 도와주는 웹브라우저 때문에 비동기처리 가능

2. promise

const 프로미스 = new Promise(function(resolve, reject){
	
	**성공,실패 판단 필요**
	성공(결과)
});  => 성공/실패 판정 기계


프로미스.then(function(결과){
	성공시 실행
    console.log(결과)
}).catch(function(){
	실패시 실행
}).finally(function(){
	마지막에 실행
})


 - 옆으로 길어지지 않아서 가독성이 좋음
 - 실패할 경우에도 코드실행 가능
 - 성공/실패시 데이터 전달

promise 3가지 상태
1. 성공하면 <resolved>
2. 판정대기중이면 <pending>
3. 실패하면 <rejected>

3. async/await

async function 더하기(){
	let 프로미스 = new Promise(function(성공, 실패){
    	let 힘든연산 = 1+1;
        성공(100)
    })
    
    try{
    	let 결과 = await 프로미스;
    	console.log(결과)} 
    catch{
    	console.log('에러가 났네요...')
    }

}

더하기();


async를 function 앞에 붙이면 함수 실행 후에 promise 오브젝트가 남는다.
async function 안에서 쓰는 await, then 대신 사용가능
profile
프론트엔드 개발자를 꿈꾸고 있습니다!

0개의 댓글

관련 채용 정보