async&待機は何ですか?

asyncとawaitはJavaScript非同期処理モードで最近出現した構文である.従来の非同期処理方法のコールバック関数とプロセスの欠点を補い、開発者がより読みやすいコードを作成するのに役立ちます.

開発者が読むのに適したコードは何ですか?

プログラミングを習い始めたばかりの頃、変数や条件文を次のように使ったことを覚えていますか?

var user = {
  id: 1,
  name: 'Josh'
};
if (user.id === 1) {
  console.log(user.name); // Josh
}

これは、userという変数にオブジェクトを割り当て、条件文でユーザーのアイデンティティを確認し、ユーザー名をコンソールに書き込む簡単なコードです.
私たちはこのように上から次へと順番に読んで考えるのが気持ちがいいです.私がこのようにプログラミングを学んだからです.

だから読みやすいコードはasync&awaitと何の関係がありますか?

async、await構文の目的は、さっき読んだ方法と理解した方法でコードを整理することです.次のハーモニーを見ましょうか?

var user = fetchUser('domain.com/users/1');
if (user.id === 1) {
  console.log(user.name);
}

fetchUser()メソッドを呼び出すと、前に見たコードのようにユーザーオブジェクトを返してみます.ここでfetchUser()メソッドがサーバからユーザ情報を取得するHTTP通信コードであると仮定すると、上記のコードはasync&await構文が適用されたものと見なすことができる.
これがどういう意味なのか見てみましょう.

async&await体験

まず、前のコードをlogName()という簡単な関数で囲みましょう.

function logName() {
  var user = fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

次に、上記の関数を実行すると、コードの動作はさっきと同じになります.次に、図のようにasyncとwaitを追加します.

async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

こつこつ.これがasync waitコードです.もしあなたがまだ完全に理解していないなら、心配しないでください.今からじっくり見てみます!:)

async&アプリケーション待ちコードと非アプリケーション待ちコード

さっき見たコードがどういう意味なのか見てみましょうまず、さっき見たlogName()関数コードをもう一度見てみましょう.

function logName() {
  var user = fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

ここで、fetchUser()というコードは、サーバからデータを受信するHTTP通信コードであると仮定する.通常、JavaScriptの非同期処理コードはコールバックを使用する必要があります.これにより、コードの実行順序が保証されます.
function logName() {
//次のuser変数は、上のコードと比較されます.

var user = fetchUser('domain.com/users/1', function(user) {
   if (user.id === 1) {
     console.log(user.name);
   }
 });
}

上記のコールバックを使用して非同期処理コードを記述することに慣れている場合は問題ありませんが、このような考え方に慣れていない人は首を横に振る可能性があります.
私たちが初めてプログラミングを学んだときの事故に戻ります簡単に考えてみると、以下のようになります.

// 비동기 처리를 콜백으로 안해도 된다면..
function logName() {
  var user = fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

サーバからユーザデータを取得して変数に入れ、ユーザIDが1の場合はユーザ名を出力する.
この操作を実行するには、async waitを貼り付けるだけです:)

// async & await 적용 후
async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

※注意:上記のコールバック関数コードに触れていない場合は、非同期処理とコールバック関数の記事を必ず再度お読みください.

async&awaitデフォルト構文

今、async awaitの基本的な文法を見てみましょう.

async function 함수명() {
  await 비동기_처리_메서드_명();
}

まず,関数の前に保持語asyncを付ける.そして,関数の内部論理でHTTP通信を行う非同期処理コードにwaitを付ける.ここで注意しなければならないのは、非同期処理方法が「待機」の予想される操作に従うために「基本情報」オブジェクトを返さなければならないことです.
通常、awaitの非同期処理コードはAPI呼び出し関数であり、Axiosなどのプロセスを返します.

async&待機の簡単な例

文法をより正確に理解するために,簡単なasync waitコードを見てみよう.

function fetchItems() {
  return new Promise(function(resolve, reject) {
    var items = [1,2,3];
    resolve(items)
  });
}

async function logItems() {
  var resultItems = await fetchItems();
  console.log(resultItems); // [1,2,3]
}

まず、fetchItems()関数はプロセスオブジェクトを返します.プロセスは「JavaScript非同期オブジェクトの処理」として学習されました.fetchItems()関数を実行すると、プロセスは実行され、結果値はitemsに並べられます.
logItems()関数を見てみましょう.logItems()関数を実行すると、resultItems変数にはfetchItems()関数の結果値items配列が含まれます.したがって、コンソールは[1,2,3]を出力します.
waitを使用しない場合は、コールバック関数を使用して、データを受信したときにコンソールを出力できます.そしてランプを使うべきです.しかしasync wait文法のおかげで、非同期を考える必要はありません.
※注意:上記のコードが非同期処理コードである理由がよく分からない場合は、fetchItems()を次の関数に変換して実行してみてください:)

// HTTP 통신 동작을 모방한 코드
function fetchItems() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      var items = [1,2,3];
      resolve(items)
    }, 3000);
  });
}

// jQuery ajax 코드
function fetchItems() {
  return new Promise(function(resolve, reject) {
    $.ajax('domain.com/items', function(response) {
      resolve(response);
    });
  });
}

async&待機実用例

async&await構文が最もまぶしいのは、複数の非同期処理コードを処理することです.以下に示すように、各ユーザのタスクリストを受信するHTTP通信コードを示す.

function fetchUser() {
  var url = 'https://jsonplaceholder.typicode.com/users/1'
  return fetch(url).then(function(response) {
    return response.json();
  });
}

function fetchTodo() {
  var url = 'https://jsonplaceholder.typicode.com/todos/1';
  return fetch(url).then(function(response) {
    return response.json();
  });
}

これらの関数を実行すると、ユーザー情報と待機事項情報を含むプロセスオブジェクトが返されます.
次に、この2つの関数を使用して、やるべきことのタイトルを出力しましょう.次に、サンプルコードの論理を示します.
fetchUser()を使用してユーザー情報を呼び出す
受信したユーザIDが1の場合、保留情報を呼び出す
受信する保留中のヘッダーをコンソールに出力
ではコードを見てみましょう

async function logTodoTitle() {
  var user = await fetchUser();
  if (user.id === 1) {
    var todo = await fetchTodo();
    console.log(todo.title); // delectus aut autem
  }
}

logToDoTitle()を実行すると、delctus aut autemがコンソールに出力されます.上記の非同期処理コードをコールバックまたはpromisとして使用すると、コードがより長くなり、インポートだけでなく可読性も低下する可能性があります.このasync await構文の利点は、従来の非同期処理コードで考える必要がないことです.
※注意:上記の関数で使用されるfetch()APIは、chromeなどの最新ブラウザでのみ実行されます.

async&await異常処理

async&awaitが異常を処理する方法がtry catchです.プロミスでエラーを処理するために.catch()を使用するように、asyncはcatch{}を使用することができます.
すぐにtry catch構文をコードに適用しましょう.

async function logTodoTitle() {
  try {
    var user = await fetchUser();
    if (user.id === 1) {
      var todo = await fetchTodo();
      console.log(todo.title); // delectus aut autem
    }
  } catch (error) {
    console.log(error);
  }
}

catchでは、上記のコードを実行するときに発生するネットワーク通信エラーや、単純なタイプのエラーなど、一般的なエラーを特定できます.検出されたエラーはerrorオブジェクトに含まれるため、エラーのタイプに応じてエラーコードを処理できます.

の最後の部分

今まで見た内容で感じは見つかりましたか?いつも初めて見る文法は完全に理解するのに時間がかかります.実際にサービスを作るときに上記の内容を適用するとよりわかりやすくなります
async awaitについては、フロントエンドのイベントとデータ処理をさらに理解するのに役立ちます.じゃ、ちゃんとコードしてください.ありがとうございます.😄