비동기(Asynchronous)💡

🧡동기와 비동기

• 동기 (Synchronous)
  • 코드의 작성순서대로 코드가 실행되는 것
  • 요청과 결과가 동시에 나타남

  //동기코드 예시 
  //위에서부터 아래로 차례대로 코드가 실행 됨
  console.log(1)
  console.log(2)
  console.log(3)

  // 출력
  // 1
  // 2
  // 3

• 비동기 (Asynchronous)
  - 코드의 작성순서가 무시됨
  - 요청과 결과가 동시에 일어나지 않음
  

  // 비동기 코드 예시 1
  // 코드작성 순서와 실행순서가 일치하지 않음

  console.log(1)
  setTimeout(() => { console.log(2) }, 1000)
  console.log(3)

  // 출력
  // 1
  // 3
  // 2

  // 비동기 코드 예시 2
  // 요청과 결과가 동시에 일어나지 않음
  const btn = document.querySelector('button')

  btn.addEventListener('click',function(){
      console.log('Button Clicked')
  })

  console.log('Hello')

  // 출력 
  // 'Hello'
  // 'Button Clicked' (버튼을 클릭해야 실행 됨)

🧡Promise

• 비동기코드 처리 시 사용 됨

• 동기코드처럼 요청과 동시에 값을 반환하나 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환

• Promise의 상태

  • 대기(pending) : 초기(기본) 상태
  • 이행(fulfilled) : 연산이 성공적으로 완료 됨 => resolve()
  • 거부(reject) : 연산이 실패 / 거부 됨 => reject()

• Promise의 인수로 resolve와 reject가 제공 됨

• 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출

new Promise((resolve, reject) => {
  if(...) {
     // 거부 / 실패 시
     reject('에러메세지')
  }
  
  // 성공 시
  resolve('반환 될 결과값')
})

💛Promise 예시코드

  function loadImage(src){
    // 함수 내 사용 시 Promise앞 return키워드 필수
    return new Promise((resolve, reject) => {
      
     if (!/^https?:\/\//.test(src)) {
       
      reject(new Error('이미지 주소의 프로토콜이 누락되었습니다!'))
       
      //reject시 아래 코드가 더이상 수행되지 않도록 return
      return
     }

     const img = document.createElement('img')
     img.src = src
      
     img.addEventListener('load', () => {
       //로직 종료(연산성공)
       resolve()
     })
      
    })
  }

🧡try & catch

• 예외처리 구문
• 에러 발생확률이 있는 연산 실행 시 사용 됨
• 비동기 코드는 아니지만 비동기처리 시 에러 발생 확률이 높아 함께 사용하기 좋음 ❗

  try {
    //기본 로직 작성
  } catch () {
    //try블럭 내의 코드 실행 중 에러(예외)발생 시 실행 될 로직
  }

• try : 기본 연산 실행
• catch : try블럭의 연산 처리 중 발생항 예외상황에 대한 처리 로직

💛try&catch 예시코드

  //위 promise예시코드의 함수 호출 상황
  try {
    await loadImage('picsum.photos/3000')
    console.log('이미지 로드됨!!')
  } catch (error) {
    console.log(error.message)
  }