비동기식 코드 작성 (promise, async , await) 고려점

프로젝트를 진행하면서  비동기식 코드를 작성을 많이 하게 되는데,  비동식으로 코드 작성시 항상 갈증이 있었는데 외국 블로그에 잘 정리된 글을 보고 배움을 얻어 코드를 작성할때 고려하려고 한다.

한화면에서 여러 api로 호출하는 부분이 있었는데 promise.all을 써서 해결한 경험이 있었는데
eslint 로 조금더 가독성 좋은 코드로 되는 부분이 있어서 내용을 가져왔다.

// ❌
for (const url of urls) {
  const response = await fetch(url);
}

// ✅
const responses = [];
for (const url of urls) {
  const response = fetch(url);
  responses.push(response);
}

await Promise.all(responses);

 

 

Promise를 x 표시 되게 썼던 경험도 있어서 올바른 방법으로 사용하기 위하여 적어둠.

// ❌
new Promise((resolve, reject) => {
  return result;
});

// ✅
new Promise((resolve, reject) => {
  resolve(result);
});

 

바로 await를 반환한 값을 바로(직접) 변화를 주면 race condition(경쟁상태로) 되어진 값으로 같은 시간(시점)에 업데이트가 되면 제대로 된 결과를 얻을수가 없다.
결론은 좋은 방법은 const "변수" 로 생성한 후에 값을 변경을 주는것이 좋다.

let totalPosts = 0;

async function getPosts(userId) {
  const users = [{ id: 1, posts: 5 }, { id: 2, posts: 3 }];
  await sleep(Math.random() * 1000);
  return users.find((user) => user.id === userId).posts;
}

// ❌
async function addPosts(userId) {
  totalPosts += await getPosts(userId);
}

// ✅
async function addPosts(userId) {
  const posts = await getPosts(userId);
  totalPosts += posts; // variable is read and immediately updated
}

await Promise.all([addPosts(1), addPosts(2)]);
console.log('Post count:', totalPosts);

 

참고한 개발자 블로그

https://maximorlov.com/linting-rules-for-asynchronous-code-in-javascript/

14 Linting Rules To Help You Write Asynchronous Code in JavaScript