ES 2017の新機能:asyncとawait

この文章はアルバート・モントラー市のモダン・JavaScriptコアガイドに基づいて書かれた.
ES 2017は、async/awaitキーワードを使用する新しいプロセス動作方式を導入した.
プロセスの再表示
新しい構文を理解する前に、「プロセス」を使用する一般的な方法を簡単に振り返ってみましょう.

// 깃허브 사용자 정보 조회
fetch("https://api.github.com/users/AlbertMontalesi")
  .then((res) => {
    // 응답을 json형식으로 반환
    return res.json();
  })
  .the((res) => {
    // 성공 시 데이터를 출력
    console.log(res);
  })
  .catch((err) => {
    // 실패 시 오류 출력
    console.log(err);
  });

これは非常に簡単なプロセスコードであり、羽集線器APIを使用して羽集線器ユーザーに関する情報を取得し、コンソールに出力します.
もう一つの例を見てみましょう.

function walk(amount) {
  return new Promise((resolve, reject) => {
    if (amount < 500) {
      reject("the value");
    }
    setTimeout(() => resolve(`you walked for ${amount} milliseconds`), amount);
  });
}

walk(1000)
  .then((res) => {
    console.log(res);
    return walk(500);
  })
  .then((res) => {
    console.log(res);
    return walk(700);
  })
  .then((res) => {
    console.log(res);
    return walk(800);
  })
  .then((res) => {
    console.log(res);
    return walk(100);
  })
  .then((res) => {
    console.log(res);
    return walk(400);
  })
  .then((res) => {
    console.log(res);
    return walk(600);
  });

// you walked for 1000 milliseconds
// you walked for 500 milliseconds
// you walked for 700 milliseconds
// you walked for 800 milliseconds
// uncaught exception: the value is too small

これは簡単な流れで、特に説明はありません.次に、async/await構文を使用してこの例を再記述するプロセスを見てみましょう.
aync/await
次のコードを見てください.

function walk(amount) {
  return new Promise((resolve, reject) => {
    if (amount < 500) {
      reject("the value");
    }
    setTimeout(() => resolve(`you walked for ${amount} milliseconds`), amount);
  });
}

async function go() {
  // 프로미스가 완료될 때까지 기다리기 위해 await 키워드를 사용
  const res = await walk(500);
  console.log(res);
  const res2 = await walk(900);
  console.log(res2);
  const res3 = await walk(600);
  console.log(res3);
  const res4 = await walk(700);
  console.log(res4);
  const res5 = await walk(400);
  console.log(res5);
  console.log("finished");
}

// you walked for 500 milliseconds
// you walked for 900 milliseconds
// you walked for 600 milliseconds
// you walked for 700 milliseconds
// uncaught exception: the value is too small

このサンプルコードを1つずつ分析してみましょう.

非同期関数を作成するには、asyncキーワードを関数の前に付ける必要があります.

このキーワードは、JavaScriptが常にプロセスを返すことを示します.

非同期関数で非プロセスを返す値を作成すると、JavaScriptは自動的にその値をプロセスとして返します.

awaitキーワードは非同期関数でのみ動作します.

名前に示すように、awaitキーワードはJavaScript待機プロセスの結果を示す.

非同期関数でawaitを使用しようとすると、何が起こったかを確認します.

// 일반 함수에서 await을 사용한 경우
function func() {
    let promise = Promise.resolve();
    let result = await promise;
}
func();
// SyntaxError: await is only valid in async functions and async generators

// 코드 최상위 레벨에서 await을 사용한 경우
let response = Promise.resolve();
let result = await response;
// SyntaxError: await is only valid in async functions and async generators

覚えておいてください.await非同期関数でのみ使用可能
エラー処理
一般に、.catch()を使用して、プロセスによって返されるエラーを処理します.async/await文法を使ってもあまり違いはありません.

async function asyncFunc() {
  try {
    let response = await fetch("your-url");
  } catch (err) {
    console.log(err);
  }
}

asyncFunc();
// TypeError: failed to fetch

通常はtry ...catch構文を使用してエラーを処理しますが、この構文を使用しなくても次のエラーを処理できます.

async function asyncFunc() {
  let response = await fetch("your-url");
}

asyncFunc();
// Uncaught (in promise) TypeError: Faild to fetch

asyncFunc().catch(console.log);
// TypeError: failed to fetch