[javascript] Promise & Async/Await

Promise

비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트

정해진 기간의 기능을 수행하고나면 정상적으로 기능이 수행되면
성공의 메시지와 결과값을 전달하고기능을 수행하다가 예상치 

못한 결과가 생겼다면 에러를 전달한다

자바스크립트의 클래스이다

state(상태)

promise가 수행중이면 pending 상태임
promise가 수행이 종료되면 fullfilled가됨
promise가 수행중 오류가 발생하면 reject

 

---

2가지로 나눠짐

프로듀서 : 프로미스를 만들어서 제공하는 쪽

컨슈머 : 프로미스의 결과를 사용하는 쪽

 

구문)

const promise = new Promise((resolve, reject)=>{ //생성자
	resolve() //성공수행
	reject() //성공실패수행
});

new 라는 키워드를 사용해서 오브젝트 생성

프로미스 생성자를 보면 excute라는 함수를 전달해야함

 

이 콜백함수에는 두가지 콜백 함수를 전달

resolve 기능을 정상적으로 수행해서 마지막에 최종데이터를 전달하는 resolve와

기능을 수행하다가 문제가 생기면 호출하게될 reject가 있음

state - pending 

resolve가 호출 되면 fulfiled
reject가 호출되면 rejected

result - undefined

resolve가 호출되면 value

reject호출되면 error

 

 

then()메소드

then, catch, finally 사용(에러 핸들러)

 

//프로미스 프로듀서
let promise = new Promise((resolve, reject)=>{
    console.log("수행중......");
    setTimeout(()=>{
        resolve("성공");
        /* reject("error") */ //reject가 호출되면 catch가 받음
    }, 2000)
});
//프로미스 컨슈머
promise.then(value =>{
    console.log(value);
}).catch(error=>{
    console.log(error)
})
.finally(()=>{
    console.log("끝났어요");
});
console.log("하하하하하하ㅏㅎ") 
// 동기는 위에서 아래로 순서대로 수행하고 비동기는 순서대로 실행안됨  
//현재 줄 코드 먼저 실행되고 finally실행됨

 

 

Promise 활용하여 XMLHttpRequest객체 생성

 function getDataPromise() {
    return new Promise((resolve, reject)=>{
        const xhr = new XMLHttpRequest();//XMLHttpRequest객체 생성
        //http메소드와 path정의
        xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");
        //header값중 content-type을 정의
        xhr.setRequestHeader("content-type", "application/json");
        //요청 전송
        xhr.send();
        //xhr.addEventListener("load", function(){})
        xhr.onload = () =>{
            if(xhr.status === 200) {
                //응답데이터
                const res = JSON.parse(xhr.response);
                resolve(res);
            }else {
                console.error(xhr.status, xhr.statusText);
                reject(new Error(xhr.status));
            }
        }
    })
    }
    getDataPromise().then((res)=> {
    console.log(res);
    }).catch((error)=>{
    console.log(error);
    }).finally(()=>{
    console.log("끝났어요")
    })
    console.log("이게 비동기에오")

 

 

Async & await 사용

비동기 실행을 의미!!!

async를 함수 앞에 붙이면 Promise를 리턴해서 호출함

즉 async를 함수 앞에 적으면 프로미스를 쓰지않아도 함수 안에 블럭이 프로미스로 적용됨

await은 비동기를 실행해서 결과가 올때까지 기다린다는 것을 의미

await은 async가 있어야 사용 가능!!!

 

 

비교하기

FetchAPI 사용했을 때

function myFunction() {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then((response)=>response.json())
    .then((json)=>{
        console.log(json);
        fetch('https://jsonplaceholder.typicode.com/posts/1', {
            method: 'PUT',
            body: JSON.stringify({
                id: 1,
                title: 'foo',
                body: 'bar',
                userId: 1,
            }),
            headers: {
                'Content-type': 'application/json; charset=UTF-8',
            },
        }).then((response)=>response.json())
        .then((json)=>console.log(json));
    })
}
myFunction()

 

Async/Await 사용했을 때

async function myFunction(){
    const res1 = await fetch(
        "https://jsonplaceholder.typicode.com/posts/1"
    );
    const res1Json = await res1.json();
    console.log(res1Json);

    const res2 = await fetch(
        "https://jsonplaceholder.typicode.com/posts/1",
        {
            method: "PUT",
            body: JSON.stringify({
                id: 1,
                title: "foo",
                body: "bar",
                userId: 1,
            }),
            headers: {
                "Content-type": "application/json; cherset=UTF-8",
            },
        }
    );
    const res2Json = await res2.json();
    console.log(res2Json);
}
myFunction()

 

출력값

 

▶Async/Await를 사용하면 간결하고 가독성이 높은 코드 구현