JS 비동기코드 실전예제

처음 짠 코드

// 여기서 비동기로 하는게 깔끔함.
    dispatch(asyncReadFilteredDataFetch(values))
      .unwrap()
      .then((res) => {
        try {
          let merchandiseArr = [];
          const merchandises = res;
          merchandises.forEach((merchandise) => {
            const datas = {
              table: 'product',
              eqKey: 'code',
              eqValue: merchandise.product_code,
            };
            // 여기서 비동기로 빠짐
            dispatch(asyncReadFilteredDataFetch(datas))
              .unwrap()
              .then((response) => {
                merchandiseArr.push(response[0]);
              })
              .catch((error) => console.log(error));
          });
          console.log(merchandiseArr);
          return merchandiseArr;

수정한 코드 async/await

const getProductDataArr = async () => {
      try {
        let productDataArr = [];
        const componentValues = {
          table: 'component',
          eqKey: 'merchandise_code',
          eqValue: code,
        };
        const components = await dispatch(
          asyncReadFilteredDataFetch(componentValues)
        );
        for (const component of components.payload) {
          const productValues = {
            table: 'product',
            eqKey: 'code',
            eqValue: component.product_code,
          };
          const product = await dispatch(
            asyncReadFilteredDataFetch(productValues)
          );
          productDataArr.push(product.payload[0]);
        }
        return productDataArr;
      } catch (error) {
        return alert(error);
      }
    };
    getProductDataArr().then((res) => setProductData([...res]));

async/await를 사용하면 코드의 가독성이 좋아지며, 비동기 처리가 간편해집니다.
함수 내에서 await 키워드를 사용하여 비동기 함수의 반환 값을 기다리고, try/catch 블록을 사용하여 오류를 처리합니다.

위 코드에서는 getMerchandiseArr 함수를 async로 정의하여 비동기 함수로 만들고, await 키워드를 사용하여 비동기 함수의 반환 값을 처리합니다.

for-of 루프를 사용하여 각 merchandise의 product_code에 해당하는 product 데이터를 비동기로 가져와 merchandiseArr 배열에 추가합니다. 마지막으로, merchandiseArr 배열을 반환합니다.

성능 개선한 코드 for...of -> map

const getProductDataArr = async () => {
  try {
    const componentValues = {
      table: 'component',
      eqKey: 'merchandise_code',
      eqValue: code,
    };
    const components = await dispatch(asyncReadFilteredDataFetch(componentValues));

    // components 배열을 map()을 사용하여 product 데이터를 비동기적으로 가져옴
    const productDataArr = await Promise.all(components.payload.map(async (component) => {
      const productValues = {
        table: 'product',
        eqKey: 'code',
        eqValue: component.product_code,
      };
      const product = await dispatch(asyncReadFilteredDataFetch(productValues));
      return product.payload[0];
    }));

    return productDataArr;
  } catch (error) {
    console.error(error);
    return []; // 에러 발생 시 빈 배열 반환
  }
};

getProductDataArr()
  .then((res) => {
    setProductData([...res]);
  })
  .catch((error) => {
    console.error(error);
  });

for...of 루프 대신 Array.map()을 사용하여 변환 작업을 수행합니다.

에러 처리를 개선하여 catch 블록에서 alert() 대신 console.error()를 사용합니다.

또한 Promise.all()을 사용하여 여러 비동기 작업을 병렬로 실행하고 결과를 기다리는 방식으로 성능을 향상시켰습니다.