#TIL 17일차(동기 통신 & 비동기 통신)

---

동기 통신

동기 통신은 요청과 응답이 순차적으로 이루어지는 통신 방식

특징

⭐️ 요청과 응답이 순차적으로 이루어짐
⭐️ 요청을 보낸 후 응답을 기다려야 함
⭐️ 작업이 순차적으로 실행되어 진행 상황을 예측하기 쉬움

예시 코드

// 동기적으로 데이터를 가져오는 함수
function fetchDataSync() {
  // 데이터를 요청
  const responseData = requestSync();
  // 데이터를 처리
  const processedData = processDataSync(responseData);
  // 처리된 데이터 반환
  return processedData;
}

// 동기적으로 데이터를 요청하는 함수
function requestSync() {
  // 데이터 요청
  const responseData = { id: 1, name: "홍길동" };
  // 요청한 데이터 반환
  return responseData;
}

// 동기적으로 데이터를 처리하는 함수
function processDataSync(data) {
  // 데이터 처리
  const result = `이름: ${data.name}, ID: ${data.id}`;
  // 처리된 결과 반환
  return result;
}

// 동기적으로 데이터 가져오기
const resultSync = fetchDataSync();
console.log(resultSync);

비동기 통신

비동기 통신은 요청과 응답이 별도로 처리되는 통신 방식

특징

⭐️ 요청과 응답이 별도로 처리됨
⭐️ 요청을 보낸 후 응답을 기다리지 않고 다른 작업 수행 가능
⭐️ 작업이 병렬로 실행되어 진행 상황을 예측하기 어려움

예시 코드

// 비동기적으로 데이터를 가져오는 함수
function fetchDataAsync() {
  // 데이터를 요청
  requestAsync()
    .then(processDataAsync) // 요청이 성공하면 데이터를 처리
    .then((result) => {     // 처리가 완료되면 결과 출력
      console.log(result);
    })
    .catch((error) => {     // 요청 또는 처리 중 오류가 발생하면 오류 메시지 출력
      console.error(error);
    });
}

// 비동기적으로 데이터를 요청하는 함수
function requestAsync() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행 (예: 서버에서 데이터 가져오기)
    setTimeout(() => {
      const responseData = { id: 1, name: "사과" };
      // 성공 시 결과 반환
      resolve(responseData);
      // 실패 시 오류 반환
      // reject(new Error("데이터 요청 실패"));
    }, 1000); // 2초 지연 시뮬레이션
  });
}

// 비동기적으로 데이터를 처리하는 함수
function processDataAsync(data) {
  // 데이터 처리 (예: 데이터 가공)
  return `이름: ${data.name}, ID: ${data.id}`;
}

// 비동기적으로 데이터 가져오기
fetchDataAsync();