[2024.05.13] JS 비동기 특강

• 동기적 처리(동기적 흐름): 선행 작업이 끝날 때까지 기다렸다가 후행 작업이 진행되는 작업 흐름 ⇒ (가능한 그대로 외우기)
• 실행 자체가 뒤에 된다는게 아님! 실행은 동기적으로 되지만, 작업이 끝날 때 까지 기다리지 않는 것
• ※ 동기적: 위에서 아래로 실행도 되면서 ‘완료’도 되는 것

// 동기적 작업 흐름의 예
console.log(1)
console.log(2)
console.log(3)

• ※ 비동기적: 위에서 아래로 작업은 실행은 되지만 완료는 기다리지 않고 다음 코드로 넘어가는 것

// 비동기 처리의 예
console.log(1)
//setTimeout의 time이 0이더라도 3이 먼저 실행됨
setTimeout(() => { console.log(2) }, 1000) 
console.log(3)

01. Promise

• Promise는 약속이다. “비동기적으로 작업을 처리해 주겠다는 약속”이다.
• Promise 스펙을 활용한 비동기 작업들은 Promise(약속)을 돌려준다(리턴한다)

(1) 약속(Promise)의 세 가지 상태

1. pending → 약속을 막 한 상태 (약속 생성)
2. fulfilled → 약속을 성공적으로 잘 수행한 상태 (약속 지킴)
3. rejected → 약속을 성공적으로 수행하지 못 한 상태 (약속 못 지킴)

⇒ 시간의 흐름에 따라 ‘하나의 상태’에 머물러 있음

(2) (우리가) 약속을 만드는 법

1. new Promise()
2. async function () {}
   • 즉, async 함수는 항상 약속(Promise)을 리턴한다.
3. 약속을 then으로 이어나갈 경우

Q. fetch는 위와 다른데 비동기로 처리되지 않나요?

A. fetch()의 내부적으로는 위와 같이 구성되어 있음.

// #1. new Promise()
const promise = new Promise(() => {});
console.log(promise); // -> promise

// #2. async function
async function someFunction() {
	return 5
}

const result = someFunction();
console.log(result); // -> Promise {<fulfilled>: 5}
//약속의 내용이 동기적인 내용으로만 구성되면 바로 fulfilled가 됨

// #3. then
const reuslt2 = someFunction().then();
console.log(result2); // -> promise

(3) 약속의 내용이 성공 또는 실패한 이후에 실행할 코드는 어떻게 작성하는가?

1. then을 사용 (ES6에서 추가된 스펙)
2. await를 사용 (ES7에서 추가된 스펙)

const url = "http:// ~~~"

console.log(1);
fetch(url).then(response1 => console.log(response1);

// response.json(): 비동기 promise를 반환함 -> then으로 chaining
fetch(url)
	.then(response2 => response2.json()
	.then(response2 => console.log(response2)
	));
	
// await: 약속이 지켜질 때까지 기다릴게요. await 뒤에는 Promise가 옴
const response3 = await fetch(url);
console.log(3);

2. Await

await is only valid in async functions and the top level bodies of modules

• await 키워드는 async function 또는 module의 top level body에서만 사용할 수 있다.

※ script태그에 “type=module”을 붙이지 않고 비동기 사용하기

 

1. async 함수로 감싼다

async function someFunction() {
	console.log(1);
	const response = await fetch(url);
	console.log(3);
}

 

2. then 사용

	console.log(1);
	fetch(url).then(response => console.log(response)
	console.log(3);

 

// url을 받아오는 함수를 만들고 싶다면
async function getTodos() {
	const url = "<http://~~~~~~>";
	const response = await fetch(url) {
	const data = await response.json();
	
	return data;
}

async function getTodo(todoId) {
	const url = `http://~~~~~~/todos/${todoID}`;
	const response = await fetch(url) {
	const data = await response.json();
	
	return data;
}

 

---

 

async function callAPIAfter3Seconds() {
	const url = `http://~~~~~~/todos/${todoID}`;
	
	const 삼초뒤에값을준다는약속 = new Promise((resolve) => {
		setTimeout(async () => {
		const response = await fetch(url);
		resolve(response);
		}, 3000)
	})
	
	
	// 3초 뒤에 실행하고 싶을 때
	const response = await 삼초뒤에값을준다는약속;
	console.log(response);
	}
	
	callAPIAfter3Seconds();

 

resolve의 뜻: 약속이 성공했어라고 알려줘

resolve 자체가 약속의 성공을 의미함(약속이 성공적으로 완료가 된 상태가 되면 → 그런게 아니라 resolve라는 그 자체가 성공임)

new Promise((resolve, reject) => {
	이러면 작업 성공! => resolve
	이러면 작업 실패 => reject
}

async function callAPIAfter3Seconds() {
	const url = `http://~~~~~~/todos/${todoID}`;
	
	const 삼초뒤에값을준다는약속 = new Promise((resolve) => {
		setTimeout(async () => {
			try {
				const response = await fetch(url);
				const data = response.json();
		
				resolve(data); 
			} catch(e) {
				reject("실패")
			}
		}, 1000)
	})
	
	
	const response = await 삼초뒤에값을준다는약속;
	console.log(response);
	}
	
	callAPIAfter3Seconds();