[JavaScript] 자바스크립트에서 비동기화 Promise 사용하기

216_자바스크립트에서 비동가화 Promise 사용하기

[적용]

• 비동기 처리를 다루고 싶을 때

---

[문법]

메소드	의미	반환
new Promise(함수)	Promise 생성	Promise 인스턴스
Promise인스턴스.then(함수)	성공 시 콜백 함수 호출	Promise

---

[내용]

비동기 처리 작업 기능을 하는 Promise 객체를 사용하면 작업이 용이해질 뿐만 아니라 코드의 가독성도 좋아진다.

fetch()를 시작으로 브라우저의 표준 기능에도 Promise 사용이 증가하고 있으며,

await나 async와 같은 기능도 기본적으로 알아두면 좋다.

 

Promise 생성자의 인수는 비동기 처리 작업을 하는 함수를 지정하며,

함수 내부에서 비동기 처리 완료 메소드인 resolve()를 호출한다.

Promise 인스턴스의 then()을 사용해 resolve() 실행 후의 작업을 처리한다.

다음은 1초 후의 작업을 Promise를 사용해 처리하는 코드이다.

 

JavaScript                                                                                                                                                          main.js

const promise = new Promise((resolve) => {
  setTimeout(() => {
    // resolve()호출시 Promise 처리 완료
    resolve();
  }, 1000);
});

// then()으로 다음 작업 처리
promise.then(() => {
  console.log('다음 작업');  // 1초 후 실행
});

 

resolve()의 인수에는 임의의 값 지정이 가능하다.

다음은 설정한 resolve()의 인수가 then() 내부 처리에 사용되는 예시이다.

 

JavaScript                                                                                                                                                          main.js

const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('ornage');
  }, 1000);
});

promise.then((value) => {
  console.log(value);  // 결과: 'orange;
});

 

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김