비동기 처리 및 콜백함수 -> Promise -> async와 await

1. 비동기 처리 및 콜백 함수

 'Promise는 자바스크립트 비동기 처리에 사용되는 객체'라는 말을 이해해야 한다.

 

1) 비동기 처리란?

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.  그 예시로는 제이쿼리의 ajax, setTimeout()이다.

 

2) 콜백 함수로 비동기 처리 방식의 문제점을 해결할 수 있다.

 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다. 

 

3) 콜백 지옥(인코딩, 사용자 인증 등을 처리하기 위해 비동기로 처리하다가 콜백 안에 콜백을 계속 물게 되는 형식) : Promise와 Async를 이용해서 해결 가능.

 

2. Promise

 'Promise는 자바스크립트 비동기 처리에 사용되는 객체'라는 말을 이해해야 한다.

 

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 

사용 예시는 아래와 같다. 

$.get('localhost:8080/products/1', function(response) {
  // ...
});

서버에서 데이터를 받아온 뒤에 다음 것을 실행한다. 

 

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

구조는 new Promise()-> resolve()-> then()

 

3. Promise의 상태

1) Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태를 의미한다.

 new Promise(); 메서드 호출 시 대기 상태가 된다. 콜백 함수의 인자는 resolve, reject이다. 

  

2) Fulfilled(이행, 완료) : 비동기 처리가 완료되어 프로미스가 결괏값을 반환해준 상태를 의미한다. 

 resolve를 실행해서 서버에서 데이터를 받았을 경우 resolve()를 호출한다. 

 

3) Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태를 의미한다. 

 호출하면 실패할 경우 실패 상태가 되면 실패한 이유를 catch()로 받을 수 있다. 

 

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

4. async와 await

async와 awiat는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완한 것이다. 위에서와 같이 비동기 처리를 콜백으로 하지 않고 function앞에 async, 비동기 처리 메서드 앞에 awiat를 붙이면 해결된다. 

async function 함수명() {
  await 비동기_처리_메서드_명();
}

주의할 것은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작한다. 

await의 대상이 되는 비동기 처리 코드는 Axios등 프로미스를 반환하는 API 호출 함수이다.

 

5. 똑바로 써라 아래 잘못된 이유

 const fetchProjectList = async () => {
    try {
      await dybApi.get(`/api/adm/projectList?page=${page}`).then((response) => {
        if (response.data.result == "SC001") {
          setDataList(response.data.data);
          setPagingInfo(response.data.pagingInfo);
        }
      });
    } catch (error) {
      console.error("Error fetching projectList : ", error);
    }
  };

이렇게 고쳐야 함.

const fetchProjectList = async () => {
  try {
    const response = await dybApi.get(`/api/adm/projectList?page=${page}`);
    if (response.data.result === "SC001") {
      setDataList(response.data.data);
      setPagingInfo(response.data.pagingInfo);
    }
  } catch (error) {
    console.error("Error fetching projectList: ", error);
  }
};

이유 : 

1. Asynchronous fetchProjectList: The fetchProjectList function is an asynchronous function that uses the await keyword before the dybApi.get call. This is appropriate since the API call is an asynchronous operation. However, the use of await is not necessary when you are using .then() to handle the response. You can simplify the code by removing the await keyword:

2.Error Handling: The code handles errors in the fetchProjectList function using a try-catch block. However, it only catches errors that occur within the await dybApi.get(...) part. If any error occurs within the .then() block, it won't be caught by this try-catch. To handle errors in the .then() block, you can use a separate .catch() or use a more modern approach like async-await with a try-catch around the entire asynchronous operation:

 

 

async-await 에러처리 잘 봐

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

 

※ 참고자료 : https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 비동기 처리와 콜백 함수

※ 참고자료 : https://ko.javascript.info/promise-error-handling

프라미스와 에러 핸들링

https://learnjs.vlpt.us/async/01-promise.html

01. Promise · GitBook