비동기 프로그래밍(Asynchronous)

먼저 동기적(Synchronous)으로 동작한다는 걸 쉽게 이해하려면, 코드가 반드시 작성된 순서 그대로 실행된다는 것이다.

🙃 반대로, 비동기는 반드시는 작성된 순서 그대로 실행되지 않는다.

그러니까, 나의 코드 블록이 다른 코드 블록의 실행이 완료될 때까지 기다리지 않고, 동시에 실행할 수 있다는 것이다!

그래서 애플리케이션의 성능이 더 좋고 사용자 경험도 좋아진다.

비동기적 방식 처리 방법

• Promise 🤙

• Fetch

• async & await

Promise 🤙

콜백함수 대신 여러 개의 비동기 처리를 한번에 할 수 있게 하는 객체다.

함수로는 then() 과 catch() 가 있다.

then()

Promise 객체의 응답객체를 파라미터(인자)로 전달받아, 비동기적으로 내부의 콜백함수를 수행하고, Promise를 반환한다.

catch()

예외(비동기 처리에서 발생한 에러와 then 메소드에서 발생한 에러)가 발생하면 호출된다. catch 메소드는 Promise를 반환한다.

Fetch

Fetch는 웹 브라우저에서 제공하는 API이다.

HTTP 요청을 보내고 응답을 처리하는 기능을 제공한다. Promise 기반으로 작동하며, then() 메소드를 사용하여 응답을 처리할 수 있다.

fetch("https://apiURL")
    .then((response) =>response.json())
    .then((value)=> let data = value);

async & await

async 함수는 Promise를 반환하며, await 키워드는 Promise가 이행될 때까지 코드 실행을 일시 중지시킨다.

const test = async()=>{
	console.log("one")
	await fetch("https://apiURL")
    	.then((response) =>response.json())
    	.then((value)=> let data = value)
    	.finally(()=>console.log("two"))
    console.log("three")
}