이어서 [JavaScript] 비동기적인 쓰기 Promise 편 자바스크립트에 대한 비동기 처리를 씁니다.
이번에는 ES2017에서 가져온 async/await를 써서 Promise를 더욱 간결하게 쓸 수 있도록 하겠습니다.

async가 뭐예요?

함수 정의는 비동기 함수를 정의하는 데 사용됩니다.
async function에서 비동기 함수를 정의할 수 있습니다.
async function이 Promise 인스턴스를 반환합니다.

async function sample(){
return 'Hello World!!';
}

상기 예에서 정의한 Sample은 Promise로 쓰면 다음과 같다.

function sample() {
  return new Promise((resolve, reject) => {
    resolve('Hello World!!');
  });
}

async의 이용 예

async function에서 정의한 함수에서 되돌아오면 되돌아오는 값으로 Promise를 진행합니다.resolve나reject를 실행하기 때문입니다.then야.catch ()에서 리턴의 값을 받을 수 있습니다.

async function resolveSample() {
          return "sample was resolved!";
        }
        async function rejectSample() {
          // reject を呼ぶ
          return Promise.reject(new Error("エラーです..."));
        }
        async function throwSample() {
          throw new Error("エラーが発生");
        }

        resolveSample().then((value) => {
          console.log(value); 
        });
        // 実行結果 =>sample was resolved!

        rejectSample().catch((error) => {
          console.log(error.message);
        });
        // 実行結果 => エラーです...

        // catch() で例外処理を行える
        throwSample().catch((error) => {
          console.log(error.message);
        }); // => エラーが発生

await란?

async function 내에서 Promise 결과(resolve, reject)가 반환될 때까지 처리를 일시 중지하는 연산자를 나타냅니다.await는 async function에 사용할 수 있습니다.

async/await로 비동기 처리 쓰기

async/await 실제 쓰기 [JavaScript] 비동기적인 쓰기 Promise 편 에서 쓴 다음 처리를 사용합니다.

다음은 async/await를 사용하지 않고 쓴 지난번↑의 처리입니다.

///(async/awaitを使わない処理)
            const getRelated = publisher =>{
                return new Promise((resolve, reject) =>{
                    setTimeout(pub =>{
                        const recipe = { title: 'Ramen', publisher: 'Tony' }
                        resolve(`${pub}: ${recipe.title}`);
                    }, 2000, publisher);
                });
            };

            const getIDs = new Promise((resolve, reject) =>{
                setTimeout(() =>{
                    resolve([523, 883, 473, 974]);
                }, 1500);
            });

            const getRecipe = recId =>{
                return new Promise((resolve, reject) =>{
                    setTimeout(ID =>{
                        const recipe = { title: 'Udon', publisher: 'Taro' };
                        resolve(`${ID}: ${recipe.title}`)
                    }, 2000, recId);
                });
            };

            getIDs
            .then(IDs => {
                console.log(IDs);
                return getRecipe(IDs[2]);
            })
            .then(recipe => {
                console.log(recipe);
                return getRelated('Tony');
            })
            .then(recipe => {
                console.log(recipe);
            })

다음은 async/await로 쓴 처리입니다.

///(async/awaitを使った処理)
        const getRelated = (publisher) => {
          return new Promise((resolve, reject) => {
            setTimeout(
              (pub) => {
                const recipe = { title: "Ramen", publisher: "Tony" };
                resolve(`${pub}: ${recipe.title}`);
              },
              2000,
              publisher
            );
          });
        };

        const getIDs = new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve([523, 883, 473, 974]);
          }, 1500);
        });

        const getRecipe = (recID) => {
          return new Promise((resolve, reject) => {
            setTimeout(
              (IDs) => {
                const recipe = { title: "Udon", publisher: "Taro" };
                resolve(`${IDs}: ${recipe.title}`);
              },
              2000,
              recID
            );
          });
        };
async function getRecipesAW() {
          const IDs = await getIDs;
          console.log(IDs);
          const recipe = await getRecipe(IDs[2]);
          console.log(recipe);
          const related = await getRelated("Tony");
          console.log(related);

          return recipe;
        }
        getRecipesAW();

async/await를 사용하면 코드를 간결하게 쓸 수 있습니다.

참고 자료

MDN 웹docs 비동기 함수