コールスタックとイベントループのプレゼンテーションでは、単一スレッド言語のJavaScriptで非同期を処理する方法を学習しました.
あなたがコードで非動機をどのように処理したかを記録します.

Promise背景

Promiseが表示される前に、JavaScriptライブラリごとに非同期を処理するロジックが少し異なります.
開発者は、使用するライブラリに基づいて、非同期の処理方法を理解する必要があります.
非常に疲れた状況でこのような問題を解決するためにPromiseが誕生しました
非同期処理では、成功または失敗時に実行するためにコールバック関数をパラメータとして入力する必要があります.
PromiseはPromiseでこの状況を保護します.
非同期処理ロジックのインタフェースは、パラメータを受け入れずにPromiseを返すように統一されています.

そしてcatch非同期処理

import React, { useEffect } from "react";
import axios from "axios";

function Test_Then() {
  axios
    .get("https://jsonplaceholder.typicode.com/users")
    .then((response) => {
      // throw new Error("에러 발생!");
      console.log(response);
      console.log(response.data);
    })
    .catch((error) => console.log(error));
}

const App = () => {
  useEffect(() => {
    Test_Then();
  }, []);

  return <>App</>;
};

export default App;

reactからjsonプレースホルダサイトデータのコードを簡単にインポートします.
以上の非同期コードはthen catchによって成功/失敗時に処理される.
しかし、catchもAリクエストの後、Bリクエストの後、Cリクエスト...に示すように,コールバック地獄に陥るとコードが複雑になる.
A.then().catch().then().catch()....
このthecatchにおける新しい方法はES 6のasync waitである.

ES 6 async待機非同期処理

import React, { useEffect } from "react";
import axios from "axios";

async function Test() {
  try {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    // 성공시 로직
    console.log(response);
    console.log(response.data);
  } catch (error) {
    // 에러시 로직
    console.log(error);
  }
}

const App = () => {
  useEffect(() => {
    Test();
  }, []);

  return <>App</>;
};

次にcatchのコードを使用してasync awaitに変更します.
async awaitキーワードを使用し、try catchでエラーを処理します.
async awaitを使用すると、コールバック地獄のコードを経験することができます.

try {
  const A = await 요청1();
  A를 이렇게 저렇게
  const B = await 요청2();
  B를 이렇게 저렇게
  const C = await 요청3();
  C를 이렇게 저렇게
} catch (error) {
...
}

に示すように、よりきれいになります.
順序とawaitキーワードの位置が非同期であることも直感的に見ることができます.
しかし、この方法にもいくつかの欠点がある.
以上のコードはconst B部からのリクエスト1の応答変数Aを使用しない.
しかし、アクセスは継続できます.
リクエストそして(A=>A、そして2を要求します).catch().そして(B=>Bこのようにして3を要求する)…
その後、catchコードはAを使用するブロックからのみアクセスできます.
async awaitはAのコードを使用しないでアクセスすることもできます.
リファレンス
https://www.youtube.com/watch?v=27hXXsT_S4U
こちらのYouTubeは本当に素晴らしいです
https://joshua1988.github.io/web-development/javascript/js-async-await/#%EA%B7%B8%EB%9E%98%EC%84%9C-%EC%9D%BD%EA%B8%B0-%EC%A2%8B%EC%9D%80-%EC%BD%94%EB%93%9C%EC%99%80-async--await%EA%B0%80-%EB%AC%B4%EC%8A%A8-%EC%83%81%EA%B4%80%EC%9D%B4%EC%A3%A0
https://ko.javascript.info/async-await