promise, async / await

promise

비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체
promise를 쓰면 비동기 메소드를 마치 동기 메소드 처럼 값을 반환할 수 있다.
전통적인 콜백 패턴으로 인한 콜백 헬 때문에 ES6에서 도입한 또 다른 비동기적 패턴이다.
비동기 처리 시점을 좀 더 명확하게 표현 할 수 있다.

promise 후속 처리 .then()

• promise로 구현된 비동기 함수는 promis 객체를 반환한다.
• promise로 구현된 비동기 함수를 호출하는 측에서는, 이 프로미스 객체의 후속 처리 메소드를 통해 비동기 처리 결과(성공 메세지, 에러 메세지)를 받아서 처리 해야한다.

let promise = new Promise((resolve, reject) =>{
	setTimeout(() => resolve('성공'),500);
});
//promise 하나를 만든다.

promise.then(result =>{
  console.log(result);
  // 성공이 콘솔에 찍힌다.
}, error => {
  console.log(error);
  //실행되지 않는다.
});

let promise = new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error('오류')), 500);
    });

    // reject
    promise.then(result => {
        console.log(result); // 실행되지 않는다
    }, error => {
        console.log(error); // Error: 오류!가 찍힌다
    });

promise 실패 처리 catch()

// 프라미스를 하나 만들어 봅시다!
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error('오류'), 500);
    });

    promise.catch((error) => {console.log(error};);

promise chaining

• promise는 후속 처리 메소드를 체이닝을해서 여러 개의 promise를 연결 할 수 있다.
• promise 체이닝을 콜백헬을 처리 할 수 있다.
• .then 메소드를 쭉쭉 이어 주는 것을 말한다.

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

async / await

promise 객체를 훨씬 간단하게 만들어 주는 함수.

async

• 함수 앞에 항상 async를 붙여서 사용한다.
• 항상 promise를 반환한다.
• promise가 아닌 값이라도 primise로 감싸서 반환한다.

// async는 function 앞에 써준다
    async function myFunc() {
        return "프라미스를 반환"; // 예를 들어 promise가 아닌 걸 반환한다
    }

    myFunc().then(result => {console.log(result)}); // 콘솔로 확인. 프로미스를 반환 이라는 출력값이 나옴

await

• async와 반드시 함께 사용한다.
• async 함수 안에서만 동작한다.
• await는 promise가 처리될 때까지 기다렸다가, 그 이후에 결과를 반환한다.
• await를 만나면, 실행이 잠시 중단이 되었다가 promise 처리 후에 실행을 재개한다.
• await을 쓰면 함수 실행을 기다리게 하는 것

 async function myFunc(){
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => resolve("완료"), 500);
        });

        console.log(promise);

        let result = await promise; // 여기서 기다리자!하고 신호를 준다

        console.log(promise);

        console.log(result); // then(후처리 함수)를 쓰지 않았는데도, 1초 후에 완료가 콘솔에 찍힌다
    }