17 :: 비동기, Promise 예시

엘리스 SW 엔지니어 트랙 17일차

온라인 강의날

 

 

비동기, Promise에 대해

조금 깊게 들어가는날

 

 

자바스크립트 엔진은 하나의 메인 스레드

코드를 한 줄씩 실행

 

 

동기

반복문, 함수 호출 등

오랜 시간을 메인 스레드를 오래 점유하면

프로그램이 멈춘다

가령 반복문 무한루프 등

 

 

비동기

대표적으로 setTimeout(), fetch() 있다.

한 코드가 종료되기전에 다른 코드가 진행된다

시간이 걸리는 행동을 기다리며

동시에 다른 일을 처리할 수 있다

 

 

비동기 코드는 정해진 함수(setTimeout, fetch, Promise ...  )

이 함수를 비동기 API라고 부른다

 

 

Promise

비동기 처리의 순서 조종

 

new Promise(callback)

callback에는 resolve, reject를 받는다

순서를 정할 수 있는 if 로 보인다

 

resolve의 것이 then으로

reject는 catch로

 

메서드 체이닝

Promise 메서드 체인

then/catch가 다른 promise를 리턴하면

비동기에 순서를 정할 수 있는 것

 

 

Promise.all

Promise 여러개(혹은 그냥 데이터 여러개)를 배열로 넘긴다

모두 성공하면 resolved 값을 배열로 반환

 

하나라도 실패하면

실패한 첫 번째 Promise를 반환한다

 

 

Promise 예시로 사용방법 정리를 해봐야겠다

// 출력할 포스트 배열
const posts = [
    { title: 'Post 1', body : "첫번째 게시글입니다." },
    { title: 'Post 2', body : "두번째 게시글입니다." },
    { title: 'Post 3', body : "세번째 게시글입니다." },
    { title: 'Post 4', body : "네번째 게시글입니다." },
    { title: 'Post 5', body : "다섯번째 게시글입니다." }
];

// 1초뒤에 포스트 배열을 출력해줄 함수
function getPosts() {
    setTimeout(() => {
        posts.forEach((post, idx) => {
            document.body.innerHTML += `<li>${post.title}<br> 내용:${post.body} </li>`
        })
    }, 1000)
}


/* Promise 사용 구간 */

function createPost(post) {
	// 우선 새 Promise를 만들어서 return 해준다
    return new Promise((resolve, reject) => {
    
    	// 이 Promise는 2초뒤에 실행 될 것
        setTimeout(() => {
        
        	// posts배열에 post가 잘 들어갔으면 resolve 실행
            // 맨 하단을 보면 알겠지만
            // resolve가 실행된다는 것은 then(getPosts)가 실행 된다는 것
            // 즉 저 위에 getPosts가 실행된다
            if(posts.push(post)) {
                resolve()
                
            // 제대로 posts 배열로 post가 잘 안됐으면 reject
            // 즉 저 밑에 catch(err => console.log(err))가 실행된다
            // '에러 나왔소'가 err로 들어가게 된건
            } else {
                reject('에러 나왔소')
            }
        }, 2000)
    })

}

// createPost 함수를 실행하며 새 post 내용을 전달해주는 내용
createPost({ title: 'Post N', body: 'N번째 게시글입니다.' })
	.then(getPosts)
    .catch(err => console.log(err));

 

 

promise by Syed Ahmad #unsplash