[JS중급] async/await을 활용한 비동기 코드

• async/await란?
  
  • async(asynchronous) : 함수 안에 비동기적으로 실행할 부분이 있다는 것을 알림 → await이 있는 코드 & 함수에 Promise객체를 리턴하는 부분이 있다는 뜻
  • await : 그 뒤에 코드를 실행하고, 그 코드가 리턴하는 Promise객체가 fulfilled/rejected 상태가 될 때까지 기다림... 해당 객체가 fulfilled 상태가 되면 그 작업성공결과를 추출해서 리턴함 | async 안에서만 사용 가능
  • async 함수 안의 코드가 실행되다가 await을 만나면, 일단 await 뒤에 코드가 실행되고, 코드의 실행 흐름이 async 함수 바깥으로 나가서 나머지 코드를 실행 → 그 이후엔 await 뒤에 있던 Promise객체가 fulfilled 상태가 되기를 기다림 → 기다리던 Promise객체가 fulfilled 상태가 되면 await이 Promise객체의 작업 성공 결과를 리턴함

// fetch코드
fetch('https://google.com')
	.then((response) => response.text())
    .then((result) => { console.log(result); });

// 예시 - 위에 fetch코드와 동일하게 작동함
async function fetchAndPrint() {
	const response = await fetch('https://google.com');
    const result = await response.text();
    console.log(result);
}
fetchAndPrint();

// 실행 순서: async함수 선언 → 1 → fetchAndPrint() → 2 → await(일단 뒤에 코드(fetch) 실행)
// 그 뒤 함수 바깥으로 나와서 3 → 4 → 5 → 6
// 밖에 있는 코드가 다 실행된 후에는 await 뒤에 있던 Promise 객체가 fulfilled 상태가 될 때까지 기다림
// fulfilled 상태가 되면, await은 작업성공결과를 response에 추출해서 리턴 → 7
// 다음으로 넘어가서 await을 만나고 response.text() 실행 후 함수 밖으로 나감
// 실행시킬 코드가 없음... 그래서 그냥 fulfilled 상태가 될 때까지 기다림
// 기다려서 Promise객체가 fulfilled 상태가 되면 작업성공결과를 result에 넣고 내용을 출력하고 끝남
async function fetchAndPrint() {
	console.log(2);
	const response = await fetch('https://google.com');
    console.log(7);
    const result = await response.text();
    console.log(result);
}
console.log(1);
fetchAndPrint();
console.log(3);
console.log(4);
console.log(5);
console.log(6);

• catch문과 finally문 : Promise 객체가 rejected 상태에서 사용

// try catch문
async function fetchAndPrint() {
	// await이 붙어있는 Promise 객체들 중 rejected 상태가 생기면 catch문으로 넘어감
	try {
    	const response = await fetch('https://yyyy.ccc'); // 존재하지 않는 url
        const result = await response.text();
        console.log(result);
    } catch (error) { // 작업실패정보를 파라미터로 받음
    	console.log(error);
    } finally { // Promise객체가 성공하든 실패하든 상관 없이 항상 실행
    	console.log('exit');
    }
}
fetchAndPrint();

• async 함수는 항상 Promise 객체를 리턴한다!
  • Promise객체를 리턴하는 경우 : 작업 성공/실패 결과를 가진 Promise객체를 리턴
  • Promise객체 이외의 값을 리턴 : fulfilled 상태 && 리턴된 값을 작업 성공 결과로 가진 Promise 객체 리턴
  • 아무 값도 리턴하지 않는 경우 : JS에선 undefined를 리턴한 것으로 간주 → fulfilled 상태 && undefined를 작업 성공 결과로 가진 Promise 객체 리턴
  • async 함수 내부에서 에러 발생 : rejected 상태이면서, 해당 에러 객체를 작업 실패 정보로 가진 Promise 객체가 리턴

async function fetchAndPrint() {
	return 3;
}
fetchAndPrint();

>> PromiseState: "fulfilled"
>> PromiseResult: 3

• async 함수 안 async 함수 : async 함수 안에서 async와 await만 붙이면 사용 가능

// async 붙이기
// 함수 선언식
async function example1(a, b) {
  return a + b;
}
// 함수 표현식
const example2_1= async function add(a, b) {
  return a + b;
};
// 화살표 함수
const example3_1 = async (a, b) => {
  return a + b;
};
// 즉시 실행 함수
(async function (a, b) {
  return a + b;
}(1, 2));

• async를 반복 처리 하는 코드에서 사용시 유의해야 함... 의도치 않게 순차 처리를 수행하는 비효율적인 코드를 짜는 실수를 할 수 있음,,,if 순차처리가 필요한 경우가 아니라면, 각 작업을 다시 async로 묶어주면 됨
• 콜백 : 나중에 실행될 작업을 처리하는 함수
  • 동기 실행되는 콜백) 정직하게 순서대로 실행
  • 비동기 실행되는 콜백) 앞서 배웠던 것들