라면이 이해할 수 있는 async/await.

JavaScript 2 Advent Calendar 2019 19일째 보도다.
(19/12/2310:41 추기)
Promise.마지막으로 all를 보충 썼다.

대상

async/await는 어느 정도 아는 사람

무의식중에 async/await를 사용한 사람

말하자면 async/await는?

async/await는 Promise 기반의 비동기 처리를 더욱 간결하고 효율적으로 기술할 수 있는 방법이다.
일반적으로 Promise를 사용하면 더 깊고 힘든 부분을 살릴 수 있습니다.
'async/await Promise'로 검색하면 비교 내용이 많이 나오기 때문에 이번에는 쓰지 않겠습니다.

편하니까 다 async/await!

나는 이렇게 생각하는데, 사실은 함정이 있다.
이번 이야기는 주의를 기울이지 않으면 효율성이 떨어지는 느낌을 준다.
다만, 나란히 설명해도 잘 모를 것 같아서 여러분이 좋아하는 라면에 비유해보려고 합니다.

같이 라면 만들자!

갑작스럽지만 넌 라면집 주인이야.
너의 라면집에는 솜씨 좋은 점원이 세 명 있다.
분별

국수담당

수프 담당

조미료 담당

.
(어디서 봤는데)
라면을 만들기 위해서.

면은 삶은 면을 맡아주세요

수프 담당자에게 수프를 만들어 주세요

조미료 담당자에게 차슈

를 썰어달라고 한다

1-3을 완성하면 이걸 조합하면 라면을 완성할 수 있다

이런 공사는 필요한 것이다.

API 준비해!

이러한 API가 준비되어 있다고 가정합니다.
끝점
메서드
개요
/noodle
GET
국수 만들기
/soup
GET
수프 제작 및 획득
/pork
GET
자료를 제작하여 얻다
/ramen
POST
라면을 만들다

실현해 보자!

이것은 아무것도 아니다. 매우 간단하다

async () => {

  // 麺担当に麺をゆでてもらう
  const noodles = await axios.get('/noodle');

  // スープ担当にスープを作ってもらう
  const soup = await axios.get('/soup');

  // 具担当にチャーシューを切ってもらう
  const pork = await axios.get('/pork');

  // ラーメンを完成させる。
  const ramen = await axios.post('/ramen', {
    noodles,
    soup,
    pork
  });

  // 提供
  return ramen;
}

잠시만요!
상큼하고 좋은데 NG예요.

await의 함정

await는 지정된 함수의 Promise 결과를 반환할 때까지 async function에서 처리를 일시 중지합니다.
즉

await axios.get('/noodle');

결과가 돌아오기 전에 처리를 기다리다.
이 기간에는 /soup/pork에 요청하지 않습니다.
즉
국수가 다 끓으면 국을 끓이기 시작한다
국이 다 된 후 차슈를 썰기 시작하다
이런 물건은 매우 저효로 변한다!
그렇게 하면 만들 때 면이 넓어져요...
일이 끝나길 혼자 기다리는 게 아니라 세 명의 점원이 있어서 동시에 지시를 하려는 거죠?

어떻게 하면 좋을까요?

await를 사용할 시기를 놓치다.

async () => {

  // 麺担当に麺をゆでてもらう
  const noodlesPromise = axios.get('/noodle');

  // スープ担当にスープを作ってもらう
  const soupPromise = axios.get('/soup');

  // 具担当にチャーシューを切ってもらう
  const porkPromise = axios.get('/pork');

  // 全員が出来上がるのを待つ
  const noodles = await noodlesPromise;
  const soup = await soupPromise;
  const pork = await porkPromise;

  // ラーメンを完成させる。
  const ramen = await axios.post('/ramen', {
    noodles,
    soup,
    pork
  });

  // 提供
  return ramen;
}

await는 프로미스 반환 처리와 조립하기 쉬우나 분리해서 쓸 수도 있습니다.
이렇게 하는 거예요.
면 담당, 탕 담당, 조미료 담당 동시 조리 지시.
그 후 모두가 만들었고, 완성되면 이것으로 라면을 완성했다.
그러니까 이루어질 수 있다는 거야.

완성!잘 됐다!

총결산

라면은 하늘하늘한 느낌을 주지만 전달하고 싶은 것은
기다릴 필요가 있으면 기다리고, 기다릴 필요가 없으면 기다리지 않는다.
의식적으로 쓰면 더 좋을 거야.

최후

라면 먹고 싶다고 쓰여 있어서 라면 먹으러 갔어요.

Promiseall 정보

보도의 반응이 매우 커서 나는 깜짝 놀랐다.다시 한 번 감사합니다.
여기 댓글과 트위터는 모두 프로미스입니다.all가 더 좋지 않아요?이런 의견은 이 점에 관한 것이다.
결론적으로 프로미스야.all로도 쓸 수 있어요.그리고 상황에 따라 그게 더 좋은 것 같아요.
예컨대 이번 상황에서는

async () => {
  const [noodles, soup, pork] = await Promise.all(['/noodles','/soup','/pork'].map(axios.get));

  const ramen = await axios.post('/ramen', {
    noodles,
    soup,
    pork
  });

  // 提供
  return ramen;
}

뭐 그런 거.
다만, 이 기사의 의도로 "Promise와 await을 받을 타이밍을 놓칠 수 있다"며 최대한 간단한 기사로 만들려고 해 써야 할지 말아야 할지 모르겠으나 생략했다.