17 :: 비동기, Promise 예시

17 :: 비동기, Promise 예시

728x90

엘리스 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 += `${post.title} 내용:${post.body} ` }) }, 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

from http://forgottenknowledge.tistory.com/184 by ccl(A) rewrite - 2021-11-17 11:01:26