비동기 함수 처리방법

try..catch 문

함수가 정상적으로 실행되지 않고 error 가 날 수 있는 예외상황을 처리할때 사용합니다.

try {
  // 예외가 발생할 수 있는 코드
} catch (error) {
  // 예외가 발생했을 때 실행되는 코드
  // error 매개변수에는 예외에 관한 정보가 담겨 있음
} finally {
  // 선택적으로, 예외가 발생하든 안 하든 항상 실행되는 코드
}

예외가 발생 할 수 있는 코드를 try 블럭에 넣어주고, 에러가 발생시에 실행될 코드를 catch 블럭이 넣어줍니다. 에러 발생시 에러에 대한 상세내용의 객체가 생성됩니다. catch 블록에 이 객체를 error 변수에 남아 인수로 전달합니다.
fianlly 블록에서는 try와 catch 에 상관없이 항시적으로 코드가 발생됩니다.

Promise

Promise 객체는 비동기 함수들을 간편하게 처리할 수 있도록 도와주는 객체입니다. Promise 를 사용하면 반환된 값을 .then() 과 .catch() 매소드로 사용이 가능합니다.

const myPromise =() => {
  return new Promise((resolve, reject) => {
    if (/* 성공 조건 */) {
      resolve(/* 결과 값 */);
    } else {
      reject(/* 에러 값 */);
    }
  });
}

resolve 는 작업 처리가 완료되었을때, reject는 작업이 실패되었을때 사용됩니다.

    .then((result) => {
      // 성공 시 실행할 콜백 함수
    })
    .catch((error) => {
      // 실패 시 실행할 콜백 함수
    });

fetch , then

fetch 함수는 서버통신에 사용되는 API 중 하나로 네트워크 요청을 만들고 응답을 처리하는 데 사용됩니다.
fetch 함수는 Promise 객체 를 반환하여 비동기 요청을 다루게 됩니다. Promise 의 메소드 .then(),.catch() 도 사용이 가능하게 되는것이죠.

fetch('https://주소.json')
  .then ((res) => {
    return res.json()
  })
  .then ((result) => {
    console.log(result)
  })
  // 에러처리
  .catch(() => {
  	console.log('에러')
  })

fetch() 함수로 api 주소를 가져오게 되면 반환된 값에 json() 매소드로 결과값을 다시 반환 합니다. 데이터값을 가져오는데에 에러가 난다면 .catch() 에서 처리를 해줍니다.

async , await

비동기 함수를 처리하는데 async await 를 활용할 수도 있습니다.

const sampleFunc = async () => {
    try {
        const result = await asyncFunc() 
        console.log(result)
    } catch (err) {
        console.log(err)
    }
}

await 함수는 async 와 반드시 사용하여야 합니다.
try 내부에서는 처리할 작업을 ,catch에서는 작업이 실패했을때 실행할 함수를 넣어줍니다.

await 다음에 promsie 객체를 반환하는 비동기 함수를 넣어주고 , 그 반환값을 result 에 담아줍니다.

then 의 경우 콜백함수를 넣어서 처리하지만 async/await 의 경우 promise 의 반환값을 좀더 직관적으로 보여줍니다.