JSの非同期は何ですか?

JSの非同期を書き込む前に、非同期語と同期語を定義します

動機。

動機は、注文を受け取った後、結果を渡す前に次のタスクは発生しません.

非同期。

非動機は、注文を受け取り、結果が出る前に他の操作を実行します.

同期して実行すればいいのに、なぜ非同期が必要なのですか?

例を挙げる.もしあなたが週末にスターバックスに行ってコーヒーを飲んだと思ったら.ただし、アルバイトで注文した人のコーヒーを提供するまでは、注文は受け付けません.普通にアメリカンコーヒーを1杯吸うのに3分かかりますね私の前には5組の人がいます.注文とコーヒーを取るのに18分かかります!
私たちのネット世界もそうです.あるページに同時にログインしている人がいるとします.このページは同期してログイン処理を実行します.10人近くがほぼ同時にログインしていることを考えてみましょう.私たちはまだログインしていないかもしれませんが、画面がずっとバッファリングされている様子を見なければなりません.そして私たちは心が乱れてホームページを離れます.
プログラミングにおいても実生活においても,非同期処理が必要なことは非同期処理である.これにより、お客様の体験もよくなり、すぐに収益に転化します.

JSエンジンは同期しています。

JSエンジンはコードを行単位で読み出すことで実行する.1行のコードを読み、呼び出し関数のコードを読み取ると、論理が行ごとに読み出され、実行されます.
これは当たり前です.コードを行ごとに読まなければ、私たちのコードを任意に解釈することができるからです.

JSエンジンは同期していますが、非同期はどのように処理しますか?

JSにおける非同期処理の方法は3種類程度ある.
1.ブラウザAPI、ノード.js apiをコールバックとして非同期処理
2.Promiseオブジェクトによる非同期処理
3.async waitによる非同期処理
まず、JSが上記の3つの方法で非同期処理を行う方法について、以下の画像で説明します.

上の図に示すように、関数が呼び出されると、CALL STACKに積み上げられます.オーバーラップ関数またはコールバック関数を使用する場合は、callスタックにスタックされます.非同期処理が必要な関数に遭遇した場合は?Node.js環境で実行されている場合、ノード.js環境にコールバック関数を放出します.これはノードです.js環境がコールバック関数をどのように持つかを知りたい場合は、次の内容を参照してください.非常によく整理されている
( https://www.korecmblog.com/node-js-event-loop/ )
そしてノードjsはコールバック関数をCalback Queueに格納する.今大事なのは!Node.jsにはイベントループがありますノードjsのイベントループがCall Stackに注目してから空になると、Call Stackに送信されてコールバック関数が実行されます.
では、実際に非同期で実行する方法について説明します.

ブラウザAPI、ノード。コールバックをjs apiに入れることで非同期処理を行う

console.log(1);
setTimeout(() => {
  console.log(2);
}, 5000);
console.log(3);
// 실행결과는?

1
3
2

非同期またはsettimeoutを理解していない場合は、出力結果は当然1,2,3である必要があります.私たちのJavaScriptエンジンは同期して読み込む必要があるからです.
ただし、実行結果は、settimeoutなどのブラウザapiにコールバック関数を渡すことで、JavaScriptは関数を非同期で実行することもできます.

このコードを見て何か考えがありますか.個人的には読みたくない.知らない!これで出てきました・・・
このコールバック関数はコールバック関数を呼び出し、そのコールバック関数はコールバック関数を呼び出す方式をコールバック地獄と呼ぶ.だからJS開発者はcallback地獄から抜け出すためにPromiseというものを作りました.

Promiseオブジェクトによる非同期処理

const getDataFromFilePromise = (filePath) => {
  // return new Promise()
  // TODO: Promise 및 fs.readFile을 이용해 작성합니다.

  return new Promise((resolve, reject) => {
    fs.readFile(filePath, "utf8", (err, data) => {
      if (err) {
        reject(err);
      }
      resolve(data);
    });
  });
};

getDataFromFilePromise("../README.md")
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

Promiseオブジェクトは非同期処理のためのモードであり,従来のコールバックモードの欠点を補い,非同期処理時点を明確に示すことを目的としている.
プロミスを活用するために?
Promiseの作成方法、分解と拒否、Promiseのステータス、catchについて理解します.
Promiseの作成方法
1.new Promise()でPromiseオブジェクトを作成します.
2.生成されたPromiseオブジェクトでは、resolve、executeをパラメータとして使用します.
3.非同期処理が成功した場合、非同期処理結果を解析関数に送信する.
4.非同期処理に失敗した場合、非同期処理結果を拒否関数に送信します.
プロセスステータス
「基本情報」を利用するためには、「基本情報」オブジェクトの状態を知る必要があります.プロミス客体の状態は全部で3種類ある.
1.保留中-非同期処理は実行されていません
2.完了-非同期処理が実行された状態に戻る(成功)→解析関数呼び出し(値)
3.却下-非同期処理を実行した状態に戻る(失敗)->関数呼び出しの却下(エラー)
解析()関数と拒否関数
1.解析関数は、受信プロセスオブジェクトを非同期処理した結果をパラメータとする.そしてその時に伝える.
2.拒否関数は、受信プロセスオブジェクトの非同期処理の結果をパラメータとして使用します.そしてcatchに渡します.
then()
次にresolve関数からパラメータを取得します.次にpromisの戻り値を返します.
catch()
catchは拒否関数からのパラメータを受信します.また、非同期処理に失敗し、拒否関数にパラメータが含まれている場合は、失敗したデータの処理に役立ちます.
参考にするコツ!Promiseオブジェクトはメソッドフィルタであってもよい.then().then().そして()はこのように使えます.
そして.then().then().then().catch()でもいいです.thenが返す値もPromiseオブジェクトなので、この方法でフィルタできます.

ではプロミスの弱点は何なのでしょうか。

trycatch文は使用できません.

エラーがどこから来たのかを特定するのは難しい.

callback地獄よりもかなり可読性が高いが、同期コードよりも可読性が悪い.

function promiseHell(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("프로미스 시작!");
      if (data !== false) {
        reject(new Error("error"));
      } else {
        resolve(data);
      }
    }, 5000);
  });
}


promiseHell('hello')
.then(result=>{
  ....
  return ~~~~~
}).then((result)=>{
  ....
  return ~~~~~~
}).then((result)=>{
  ....
  return ~~~~~~
}).then((result)=>{
  ....
  return ~~~~~~
}).catch(err=>console.log(err))

async waitによる非同期処理

async awaitはpromisベースのpromis構文糖バージョンである.
promisのないthen catchは、モチベーションのようにpromisを使うこともできます.

**async await 사용 예시**

const newsURL = "http://localhost:4999/data/latestNews";
const weatherURL = "http://localhost:4999/data/weather";

async function getNewsAndWeatherAsync() {
  const data1 = await fetch(newsURL).then((res) => res.json());
  const data2 = await fetch(weatherURL).then((res) => res.json());

  return {
    news: data1.data,
    weather: data2,
  };
}

**promise 사용예시**

function getNewsAndWeatherAll() {
  return Promise.all([fetch(newsURL), fetch(weatherURL)])
    .then(([data1, data2]) => {
      return Promise.all([data1.json(), data2.json()]);
    })
    .then(([data1, data2]) => {
      return {
        news: data1.data,
        weather: data2,
      };
    });
}

上のコードを見て、どの毒性がもっといいですか?ほとんどの人がasyncと答えるかもしれません.
これによりaysnc/awaitを用いて,非同期プロセッサを同期的に記述することができる.

では、どうやって使いますか。

async
簡単です.関数の前にasyncキーを付けると、関数は非同期で実行されます.
注意事項!async関数は、async関数が明示的にプロセスを返さない場合でも、デフォルトの解析戻り値のプロセスを返します.参考にしてください.
await
awaitキーワードは、プロセスが固定状態(非同期処理を実行する状態)に達するのを待ち、固定状態に達するとプロセス解析の処理結果を返します.awaitキーワードはfromisの前で使用する必要があります.次のコードを見て、コードがどのような流れに流れるか考えてみればいいです.

  const data1 = await fetch(newsURL).then((res) => res.json());
  const data2 = await fetch(weatherURL).then((res) => res.json());

  return {
    news: data1.data,
    weather: data2,
  };
}

文章が終わったら

私はCodeStatesでブロックチェーン誘導訓練キャンプの訓練を受けています.私は非同期処理を学ぶ考えを整理します.
私は6ヶ月前にコード学院でフロントを勉強したことがあります.その時はしばらく私はjsを習ったことがあります.講師はcallback地獄に行くと言っています.jsを教えた記憶を思い出す.本当に分かりにくいです.もともと初心者で、コルバー地獄で論理を理解するのは本当に容易ではありません.
彼はどうして私にコルバー地獄に行くように教えてくれたの?参考資料として持ってきたものもすべてcallback地獄です.生徒達が理解できないことは分かっているのに・・・
Promiseやasync/awaitが現れてから何年も経っているのかもしれませんが、知識を学びたくないからcallback地獄を使っているのではないでしょうか.あるいは、知っていても、自分に気まずい思いをしたという理由で書くことはないでしょう.
もちろん私が知らないもう一つのPromiseとasyncの弱点は?あるかもしれない.しかし、良いコードは他の人にも読めるコードだと思います.私が気分が悪くても、他の人が気分が良ければ、思い切って体の中に選んで吸収するのが協力が必要な開発者の宿命です.