[JS ES6] JS ES6 문법 Promise, async, await

프로미스는 자바스크립에 내장된 내장객체 입니다
프로미스 객체에서는 2가지를 형태를 지닙니다.

 

1. 상태(state) 

• pending : 수행중
• fullfilled : 성공적 완료
• rejected : 실패

2. 프로듀서 - 정보를 제공하는 제공자(즉, Promise)
    컨슈머 - 사용자(즉, 호출하는사람)

 

---

프로미스 생성
executor콜백함수를 전달해야 하며 executor콜백함수는 다시 resolve함수와 reject함수를 받습니다.

//매개변수는 컨슈머가 분명 콜백함수를 전달할거야!(그 콜백함수로 리턴해줄게!)
let promise = new Promise( (success, fail) => {

    //producer 입장에서 성공했을 때 성공을 알리는 함수
    success("success"); 

    //producer 입장에서 실패했을 때 실패를 알리는 함수
    //fail(new Error("fail"));

});

console.log(promise)

---

프로미스의 사용 then(), catch()

• then은 promise가 정상적으로 실행 된다면, 결과를 실행시켜주는 콜백함수이다.
• catch는 promise가 실패했을 때, 결과를 실행시켜주는 콜백함수이다.

//....생략
promise.then( data => console.log(data) )
       .catch( error => console.log(error) )

---

프로미스의 적용

결과가 언제 돌아갈지 모르지만, 내가 이것을 완료되면 Promise를 전달해 줄테니, 너는 then함수만 이용해서 결과를 받아서 처리해!

 

ajax fetch()의 내부모습 예시

//자바스크립트로 구현되어있는 fetch라고 가정
function myfetch(req) { 
    //비동기적 실행.. 10초..
    return new Promise( (success, fail) => {
        success("data....");
    });
}

//fetch와 같은 실행구조를 보인다.
myfetch("http://localhost:5502/~~~~~").then( response => console.log(response) );

 

---

Promise를 더 쉽게 사용할 수 있게 해주는 async(이거 비동기야)

async, await규칙

1. 어싱크 함수 안에서 어웨잇을 사용한다
2. function 앞에 async 키워드를 추가 함수는 언제나 프라미스를 반환 합니다.
3. 리턴이 프로미스라면 await을 적용하고 then절을 없앨 수 있다.

 

async란 function앞에 선언하며, return값을 자동으로 Promise로 변경해주는 역할을 한다.
즉, 비동기 함수의 실행 형태로 변경해준다.

async function myfetch(req) {
    //비동기적 실행.. 10초..
    return "data....";
}


//var result = myfetch()
//console.log(result); //Promise

myfetch("http://localhost:5502/~~~~~").then( response => console.log(response) );

 

Promise를 더 쉽게 사용할 수 있게 해주는 await(기다려)

리턴이 프로미스라면 await을 적용하고 then절을 없앨 수 있다. (단 async함수 안에서만 사용 가능합니다)

(async function() {
    let data = await myfetch();
    console.log(data)

})();

---

async, await의 장점

1. 코드의 간결성
2. 어싱크, 어웨잇은 동기적방식(순서를) 보장한다

JS ES6 문법 Promise, async, await