[JavaScript] Promise (async/await)

Promise

---

자바스크립트 비동기 처리에 사용되는 객체

 

💡 비동기 처리란?

특정 함수의 실행이 끝날 때까지 기다리지 않고 다음 함수를 실행하는 과정
비동기 처리는 순차적으로 처리하지 않는다는 특징이 있는데,
상황에 따라서 비동기 처리를 했을때 순차적으로 처리해야할 때가 있다.
이때 프로미스 객체를 사용하여 비동기임에도 불구하고 순차적으로 처리할 수 있다.

Promise의 처리 상태 3가지

• Pending(대기) : 비동기 처리가 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

new Promise()를 통하여 프로미스 객체를 생성하고 인자 값으로는 콜백 함수를 넣는다.

이때 콜백함수 인자로는 resolve, reject를 받는다.

 

Pending (대기)

 

new Promise((resolve, reject) => {}); // 대기 상태

 

Promise를 new로 생성하게 되면 Pending 상태가 된다.

 

Fulfilled (이행 )

 

new Promise((resolve, reject) => {
    resolve(); // 이행
});

 

이행 상태(완료)가 되고 그 처리가 성공하게 되면 then()을 통하여 결과 값을 받을 수 있다.

 

function init() { 
    	return new Promsie((resolve, reject) => {
        	const data = 100;
        	resolve(data);
	}).then((resolve) => { console.log(data); }); // output: 100
}

//or 

init().then((data) => {
    console.log(data); // output: 100
});

 

만약 순차적으로 실행해야할 상황이 있다면

 

function init() { 
    return new Promsie((resolve, reject) => {
            const data = 100;
            resolve(data);
}).then((resolve) => { console.log(data); })
    	.then((resolve) => { console.log(data); })
            .then((resolve) => { console.log(data); })
                .then((resolve) => { console.log(data); })
                    .then((resolve) => { console.log(data); })
                                .
                                .
}

 

위처럼 하나 작업이 끝나면 다음 작업이 실행되고 또 다른 작업이 실행되도록 할 수 있다.

 

Rejected (실패)

 

new Promise((resolve, reject) => {
    reject(); // 실패
});

 

실패 상태가 되면 실패한 이유를 catch()를 통하여 확인할 수 있다.

 

function init() { 
    return new Promsie((resolve, reject) => {
            const data = 100;
            resolve(data);
	}).then((resolve) => { console.log(data); })
    	.catch((error) => { console.log(error) }); 
}

//or 

init().then((data) => {
    console.log(data); // output: 100
}).catch((error) => { console.log(error); });

 

async & await

---

긴 프로미스의 코드를 보완하기 위한 ES7 키워드

Promise 동작을 동기적으로 사용할 수 있다.

 

async function init(): Promise<any> {
    try {
        const { data as data1 } = await axios.get('/api/posts');
        console.log(data1); // 성공한다면 아래 작업 실행
        const { postNo } = data1;
        const { data as data2 } = await axios.get(`/api/posts/${postNo}`); 
    } catch(e){ 
        console.error(e); // 작업이 실패한다면 에러 반환
    }
}

 

async 키워드를 사용하여 함수를 호출하면 명시를 하지 않아도 반환되는 값은 Promise 객체를 리턴하게 된다.

따라서 async 키워드가 붙여진 함수는 비동기 함수로 바뀌게 되는 것.

 

await 키워드는 async 함수 내부에서만 사용이 가능하다.

말 그대로 해당 작업이 끝날때까지 기다렸다가 성공하게 되면 다음 작업을 실행하고 실패한다면 에러를 반환한다.

 

await 병렬처리

---

데이터를 동시에 가져오기 위해서는 Promise 객체가 가지고 있는 all() 함수를 사용하여 병렬로 처리할 수 있다.

 

const initData1 = async () => {
    return await axios.get('/api/posts'); // 데이터를 가져오는데 3초 소요
}
const initData2 = async () => {
    return await axios.get('/api/posts'); // 데이터를 가져오는데 3초 소요
}
// 위 데이터를 다 불러오는데 걸리는 시간 6초

// 이를 한번에 묶어서 처리하면 
const allData = () => new Promise.all([initData1, initData2]).then((data) => data);
allData.then(); // 데이터를 가져오는데 3초 소요

 

 

---