비동기의 개념

: 비동기 방식은 현재 작업의 응답과 다음 작업의 요청이 동시에 진행되지 않아도 되는 것으로 응답에 관계없이 바로 다음 동작이 실행되는 것을 말한다. 특정 작업을 시작(리퀘스트 보내기)하고 완벽하게 다 처리(리스폰스를 받아서 처리)하기 전에 실행 흐름이 바로 다음 코드로 넘어가고, 나중에 콜백이 실행되는 것을 ‘비동기 실행’이라 할 수 있다.

비동기 실행은 한번 작업을 시작해두고 그 작업이 완료되기 전이더라도 콜백만 등록해두고, 코드의 실행 흐름이 바로 그 다음 코드로 넘어가며, 추후에 특정 조건이 만족되면 콜백이 실행됨으로써 해당 작업을 완료하는 방식인데, 여기서 주의할 점은 비동기 실행에서는 코드가 꼭 등장하는 순서대로 실행되는 것이 아니므로, 코드를 해석할 때 주의가 필요하다.

그렇다면 ‘비동기 실행’이라는 건 왜 존재하는 걸까?
그건 바로 보통 ‘비동기 실행’이 ‘동기 실행’에 비해, 동일한 작업을 더 빠른 시간 내에 처리 할 수 있기 때문이다.

출처 : https://goplanit.site/94.%20Synchronous_asynchronous/

fetch & Promise

Promise 기본 상대

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

fetch 함수를 사용하게 되면 Promise 객체를 리턴하게 된다. Promise의 then(성공시), catch(실패시)를 통해 데이터를 처리하는 것을 통해 표준화된 코딩이 가능하다

fetch("https://jsonplaceholder.typicode.com/posts')
	.then((resp)=>{
    	return resp.json()
    })
    .catch((reason)=>{
    	console.log(reason)
    })
    .then((data)=>{
    	console.log(data)
    })

Promise 객체 활용하기

async & await

Promise는 콜백지옥을 벗어나기 위해 고안된 것이였다. 하지만 이것보다 더 간단한 방법이 없을까를 고민하던 개발자들은 다시한번 이를 발전시켜 async, await을 만들게 된것이다.

아래 이미지에서 왼쪽코드와 오른쪽 코드는 동일한 의미를 갖는다

사용 예시

위에서 보여준 Promise 사용예제와 같은 코드다. async 명령어를 추가한 함수 안에서 await를 사용하는 것이다. async 함수는 Promise를 리턴한다.

async & await 병렬처리 하는 법

async function getBanana(){
  await delay(1000)
  return 'banana'
}

async function getApple(){
  await delay(1000)
  return 'apple'
}

//병렬 처리 x
async function pickFruits(){
	const apple = await getApple()
    const banana = await getBanana()
    return `${apple} + ${banana}`
}

pickFruits().then(console.log)
// 2초 후 출력

//병령 처리 o
function pickAllFruits(){
	return Promise.all([getApple(), getBanana()])
  .then(fruits => fruits.join(' + '))
}

pickAllFruits().then(console.log)

//1초 후 출력