Promise

Promise-개요

Promise는 복잡한 비동기 처리를 수행하는 프로그램을 작성할 때 코드 작성을 더 편리하게 할 수 있도록 제공되는 API로, V8 엔진에서 제공되는 스펙이다.

*Promise를 활용할 경우 Callback 패턴의 단점을 어느 정도 해소할 수 있다.

 

1. Promise 객체 초기화(생성)

Promise는 생성자 함수를 통해 생성할 수 있다.

const myPromise = new Promise();

 

2. Promise 객체가 관리하는 값

Promise 객체는 크게 두 가지 값을 관리한다.

1. 비동기 처리 수행 여부에 따른 상태값
2. 비동기 처리 결과값

정리하면, promise는 비동기 처리 상태와 처리 결과를 관리하는 객체

 

3. Promise를 활용한 비동기 처리

Promise 생성자 함수는 인수로 비동기 처리를 수행할 콜백 함수를 받음

-> ECMAScript에서는 이 콜백 함수를 executor function이라고 부른다.

const executor = () => {};

const myPromise = new Promise(executor);

이 콜백 함수 안에서 비동기 처리를 수행할 코드를 작성한다.

const executor = () => {
    const xhr = new XMLHttpRequest();
    const url = '[https://jsonplaceholder.typicode.com/posts/1'](https://jsonplaceholder.typicode.com/posts/1');
    xhr.open('GET', url);
    xhr.send();
    xhr.onload = () => {
        if (xhr.status === 200) {
            // 응답 성공
            console.log(JSON.parse(xhr.response));
        } else {
            // 에러 처리
            console.log(xhr.status);
        }
    }
};
 
const myPromise = new Promise(executor);
 
console.log(myPromise);

 

이 콜백 함수 executor는 비동기 처리 결과에 따른 후속 처리를 수행하기 위한 두 개의 콜백 함수를 자신의 인수로 전달받도록 동작한다.

const executor = (resolve, reject) => {
    const xhr = new XMLHttpRequest();
    const url = 'https://jsonplaceholder.typicode.com/posts/1';
    xhr.open('GET', url);
    xhr.send();
    xhr.onload = () => {
        if (xhr.status === 200) {
            // 응답 성공
            console.log(JSON.parse(xhr.response));
            console.log(resolve('성공'));
        } else {
            // 에러 처리
            console.log(xhr.status);
            console.log(reject('실패'));
        }
    }
};

1. 요청 처리가 성공하였을 때 호출하는 resolve 콜백
2. 요청 처리가 실패하였을 때 호출하는 reject 콜백

비동기 응답 처리가 성공할 경우 resolve를, 실패할 경우 reject 함수를 호출할 수 있다.