비동기와 Promise

동기와 비동기란?

• 동기(synchronous): 프로그래밍 작업에서 코드를 하나씩 순서대로 처리하는 것이다.

• 비동기(Asynchronous): 동기 작업과 다르게 앞 선 코드에서 작업이 끝나지 않더라도 뒤에 있는 다른 코드를 진행할 수 있다. (네트워크 요청을 보내는 작업 등)

자바스크립트도 기본적으로 동기적 언어이지만, 콜백함수 등을 이용하여 비동기적으로 처리하게 만든다. setTimeout()이 대표적이다.

setTimeout(() => {
	console.log('2');
}, 1000);
		
console.log('1');

// 콘솔에 1 -> 2 순으로 찍힌다.
 

Promise객체

비동기 작업의 최종 완료 또는 실패를 나타내는 객체

Promise를 왜 사용할까?

• 자바스크립트 등에서 비동기 처리를 하려면 콜백함수를 이용하게 되고 무수히 많은 콜백지옥을 경험하게 된다. 하지만 Promise를 사용하면 비동기의 작업 결과를 쉽게 처리할 수 있고, 코드를 더 간결하게 만든다.

• 비동기 작업은 특정 시간에 완료되지 않거나 순서가 보장되지 않는 작업이다. Promise 객체를 사용하면 비동기 작업의 결과를 추적해 작업이 완료될 때까지 코드를 중단하지 않고 관리해주는 '약속(promise)'이다.

• 쉽게 이해하면.. 서버에서 데이터를 불러오려면 시간이 걸리는데 그걸 다 기다리면 로딩이 늦기 때문에 비동기를 사용해야하기 때문에 비동기를 편리하게 사용할 수 있는 Promise를 사용하는 것이다.

Promise 사용법

실행자 Producer

const promise = new Promise(resolove, reject) {
	resolve(value); //성공했을 때 리턴되는 값
    reject(error); //실패했을 때 리턴되는 값
}

• Promise가 실행시키는 함수를 executor라고 하며, Promise 객체를 만드는 순간 executor가 바로 실행된다.
• executor의 인수로 넘겨준 콜백(resolve, reject) 중 하나는 반드시 호출해야 한다.

사용자 Consumer

promise
	.then(resolve => {}) 
    .catch(reject => {})
    .finally(() => {})

• then(): 성공시에 실행자에서 반환된 resolve(value)의 value를 then의 인자로 받는다.
• catch(): 오류가 있을 때 실행자에서 반환된 eject(error)의 error를 catch의 인자로 받는다.
• finally(): 성공하던 실패하던 무조건 실행되는 함수.

Promise의 state

처음엔 대기(Pending)상태 였다가 resolve가 호출되면 이행(fulfilled), reject가 호출되면 거부(rejected)

• 대기(Pending): 이행하지도 거부하지도 않은 초기 상태
• 이행(fulfilled): 연산이 성공적으로 완료됨
• 거부(rejected): 연산이 실패함

async await

Promise를 더 간결하게 만들고, 비동기 작업을 동기 작업처럼 보이게 해주는 자바스크립트의 비동기 처리 패턴이다.

async

//before

function promise() {
	return new Promsie((resolve, reject) => {
    	resolve(value)
    })
}

//after

async function promise() {
	return value
}

• async키워드를 함수 앞에 붙이면 Promise객체를 반환하게 되므로 new Promise()로 인스턴스를 만들 필요가 없다.

await

// 비동기적 async
const startDate = new Date();

const first = () => {
    setTimeout(() => {
        console.log(new Date() - startDate, 'first');
    }, 2000)
}

const second = () => {
    console.log(new Date() - startDate, 'second');
}

first();
second();


// 동기적 sync
const firstSync = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve();
            console.log('first');
        }, 2000)
    })
}

const secondSync = () => {
    console.log('second');
}

const allSync = async () => {
    await firstSync();
    secondSync();
}

allSync();


    // 작업 결과 0 second -> 2010 first -> first -> second

• await은 async 함수 안에서만 사용하는 키워드이다.
• await 뒤에 오는 코드는 Promise를 사용한다(안 그러면 syntaxError)
• await 뒤에 오는 코드가 Promise를 반환하면 해결 될 때 까지 기다린 후에 결과 값을 반환한다.
• await 뒤에 오는 코드가 끝날 때 까지 기다려! (동기적)
• await 키워드는 Promise를 반환하는 함수나 비동기적으로 동작하는 함수에서만 사용할 수 있다.