[JS] 비동기와 Callback 230808

~ 30일차 ~

- 목차

1. 비동기와 Callback

2. Promise, Fetch

3. Async, Await

---

1. 비동기와 Callback

1) 동기와 비동기

동기 동작 : 함수나 일정한 코드가 순서대로 실행-완료, 실행-완료되는 것

비동기 동작 : 함수나 일정한 코드가 실행 순서와 상관없이 완료되는 것을 말합니다

비동기에서 발생하는 에러를 해결하기 위해, 콜백 함수 (Callback Function)를 사용

2) 콜백 함수 (Callback Function)

콜백 함수 : 함수 안에서 실행되는 함수

가독성이 떨어진다.
에러 처리 시 각각 에러 핸들링이 필요하다.

---

2. Promise, Fetch

(1) Promise

• new와 생성자를 사용
• resolve, reject 두 가지 함수를 받아야 함
• Promise 객체는 생성하는 순간 그 내부의 코드 (제작 코드) 가 실행
• 생성된 promise 객체에 .then() 을 붙여서 해당 promise 내부의 비동기 동작이 완료된 결과를 받아와 특정한 코드를 실행할 수 있음

function fetchData() {
  return new Promise((resolve, reject) => {
   // const success = true;  -> 임의로 값 지정하여 테스트
    if (success) {
      resolve('성공');
    } else {
      reject('실패');
    }
    })
};

* promise 객체

• state : 제작 코드의 처리 상태 (기본값 : pending)
• result : 제작 코드의 결과 값 (기본값 : undefined)

resolve(value) 실행

• state : fulfilled
• result : value

reject(error) 실행

• state : rejected
• result : error

(2) then, catch, finally

• then : resolve, reject 에 따른 결과 모두 처리 가능
• catch : reject 에 따른 결과 처리
  -> then(null, 함수) 과 완전히 동일,
  에러 발생에 대해서만 처리하고자 할 때 catch
• finally : resolve, reject 여부에 상관없이, 프로미스 내부 코드가 완료되면 항상 실행

fetchData()
.then(function(result) {  //resolve의 값
  console.log(result);
})
.catch(function(error) { //reject의 값
  console.log(error);
})
.finally (() => {  		//이행,거부 모두 마지막에 실행
  console.log('done');
});

---

3. Async, Await

• async : 프로미스 반환
• await : 프로미스 처리까지 기다리기

• 프로미스를 더 효율적으로 쓸 수 있게 도와주는 문법
• 비동기 코드를 동기 코드처럼 보이게 함
• Promise에 then을 쓰는 것보다 가독성이 좋다
• await는 async 내부 함수에서만 사용 가능

• 동기식 코드에서 쓰는 try... catch 구문을 async/await 구조에서 사용 가능

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response1 => response1.json())
  .then(json => console.log(json))
  .then(() => fetch('https://jsonplaceholder.typicode.com/todos/2'))
  .then(response2 => response2.json())
  .then(json => console.log(json))
  .catch(err => console.log(err))
  .finally(() => console.log('--- DONE ---'));


// ---------- try catch 사용 ---------- //


async function makeRequest() {
  try {
    const response1 = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const jsonResponse1 = await response1.json();
    console.log('jsonResponse1', jsonResponse1);

    const response2 = await fetch('https://jsonplaceholder.typicode.com/todos/2');
    const jsonResponse2 = await response2.json();
    console.log('jsonResponse2', jsonResponse2);    
  } catch (error) {
    console.log(error)
  } finally {
    console.log('--- DONE ---')
  }
}

makeRequest();  //함수 실행해줘야 함