ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JavaScript] promise
    Today's/DevelopStory 2021. 7. 4. 22:38

     

    promise 란?

    비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체이다.

    코드의 형태 :

    const promise = new Promise((resolve, reject) => {
    	if(...){
    		...
    		resolve("성공!");
    	}else{
    		...
    		reject("실패!");
    	}
    });

    promise는 생성자 함수 Promise(new 키워드)를 통해 생성한다.
    비동기 처리가 성공하면 resolve, 실패하면 reject를 호출한다.
    비동기 작업을 수행할 콜백 함수를 인자로 전달받아 사용한다.

    사용 예시 :

    let promise = new Promise((resolve, reject) => {
    	setTimeout(() => resolve("완료!"), 1000);
        // 1,000 밀리세컨드 즉 1초가 지난 후 비동기 처리가 완료됨
        // 성공할 경우 resolve 인자에 "안녕!" 이라는 문구를 할당하여 반환 함
    });
    
    // resolve
    promise.then(result => {console.log(result);}, error => {console.log(error);
    //primise.them(성공 시 result라는 인자, 실패 시 error라는 인자 반환)
    });

     

    ▲ 콘솔 창에 찍힌 결과

    1. Promise의 상태값 :

    pending: 비동기 처리 수행이 아직 완료되지 않음 (resolve, reject가 아직 호출되지 않음)
    fulfilled: 수행이 성공하여 resolve가 호출된 상태
    rejected: 수행이 실패하여 reject가 호출된 상태
    settled: 비동기 처리 수행이 완료된 상태 (resolve든 reject든 호출이 된 상태)

    2. 후속 처리 메서드 :

    promise로 구현된 비동기 함수를 호출하는 측에서는 해당 promise 객체의
    후속 처리 메서드를 통해서 비동기 처리 결과를 받아야 한다.
    .then(성공시 인자, 실패시 인자) // 첫번째 인자만 작성해도 된다.
    .catch(실패시 인자)

    3. promise chaining(프라미스 체이닝) :

    후속 처리 메서드를 체이닝해서 여러 개의 프라미스를 연결할 수 있다.
    (콜백 헬을 해결하는 방법)

     사용 예시 :

    new Promise((resolve, reject) => {
    	setTimeout(() => resolve("promise 1"), 1000);
    }).then((result) => { // 후속 처리 메서드 하나를 쓰고,
    	console.log(result); // promise 1
    	return "promise 2";
    }).then((result) => { // 이렇게 연달아 then을 써서 이어주는 거예요.
    	console.log(result);
    	return "promise 3";
    }).then(...);

    'Today's > DevelopStory' 카테고리의 다른 글

    [React] 미들웨어 사용 예시  (0) 2021.07.16
    [React] redux module 예시  (0) 2021.07.06
    [Python]내장함수 : replace  (0) 2021.06.17
    [Python] f 문자열 포매팅 (f-string formatting)  (0) 2021.06.16
    [Python] 내장 함수 : map  (0) 2021.06.15

    댓글

Designed by Tistory.