(TIL)同期、非同期、およびノード.jsでの非同期の処理方法

同期と非同期とは?

1.同期

要求と結果が同時に発生した.

時間に関係なく、仕事の結果は要求と同時に現れる.

コードは上から順に実行されます.例えば家事だと仮定します.
1番:洗濯.//1時間
2番:皿洗い時間10分
3日:掃除.//30分
こんなときは、まず洗濯して、それから茶碗を洗います.茶碗を洗って、それから掃除をして、終わってから、今日の家事は終わりました.全部で上記の3つの仕事を合わせた1時間40分かかりました.
2.非同期

要求と結果が異なる.

長時間の用件で、リクエスト時にバックグラウンドで作業.

1番:洗濯.//1時間
2番:皿洗い時間10分
3日:掃除.//30分
まず洗濯物を洗濯機に置いて、洗濯機が動いたら茶碗を洗ってから掃除します.そして、洗濯機が動いて洗濯が終われば、今日の家事は終わり、洗濯が終われば他の家事はすべて完了し、上記の3つの仕事が終われば1時間+@程度です.同期方式に比べて、より高速で効率的に作業できます.

JavaScriptを使用したブラウザ

まず概念を話します.

スタック:後入先出形態

... main.js page

function outer() {
	function inner() {
    
    	return console.log("inner 함수 호출")
    }
    inner()
    
    return console.log("outer 함수 호출")
}
outer()

console.log("main 페이지 실행")

このようにホームページを実行すると、ホームページ=>outer関数=>内部関数を呼び出す形式で実行され、結果の戻り順は次のとおりです.
内部関数の呼び出し
外部関数呼び出し
コンソール結果には、実行ホームページが表示されます.

Q:先入先出形態

上のスタックとは逆に,先にテーブルに上がった作業物の順に結果物が生成される.

バックグラウンド:前の依頼を受けた場合、後の作業物を扱う場所

例)
1.レストランカウンターで注文を受けます.
2.台所に呪文を伝える.
3.台所は料理をしていて、カウンターはずっと注文を受けています.
台所は楽屋です.

イベントループがブラウザの動作原理(同期+非同期)で演じる役割は、それぞれ以下の4、5回に対応する

作業物はスタックで注文を受ける.

スタック内で作業時間の長いタスクをバックグラウンドに移動する

バックグラウンドで完成した製品がcallback列で待機

イベントリングスタックにワークピースがあるかチェック

ない場合はCallbackQの結果をスタックに載せてタスクを完了

Call backキューで動作せず、スタックでも動作しない場合はメインクローズ

Node.jsが非同期処理を行う関数や方法で、私が知っているのは

setTimeout

setInterval

Ajax

Request

fetch

axios

データベース照会

もちろんありますが、私が知っているのは李尚泰です.西品質の公式文書です.
正式なドキュメントを表示すると、タスクを非同期で処理する関数、クエリー、およびメソッドがわかります.

非同期処理

同期、非同期の疑問点

では、無条件に非同期が良いと言えば、青少年開発者の立場から明確な答えを出すことはできない.しかし、仕事は同期して行う必要がある場合もあれば、非同期で行う必要がある場合もあります.
今回も例をあげます.
1番:洗濯物を洗濯機に入れて洗います.
2番:洗濯物を乾燥機に入れます.
3番:干した服を畳んでたんすに入れる.
上記の家事があるときに私が使っていたNodejsのような場合、仕事が洗濯物であれば、私の意志が何であれ、スタックの上に置いて、楽屋に置いて仕事をします.

洗濯物を洗濯機に入れる=>バックグラウンドに移動

洗濯物を乾燥機に置く/洗濯機が回っていないので洗濯物がないx

洗濯機は洗濯機なしで乾燥機を回す

エラー発生または乾燥機動作結果なし

非同期処理

以上の問題による非同期処理方式があります.

コールバック関数

promise (resolve, reject)

then & catch

async & await

コールバック関数

コールバック関数は、後に実行される関数であり、非同期操作が終了した後に実行される関数である.

setTimeout((arg)=>{
    console.log(arg)
    
    setTimeout((arg)=>{
        console.log(arg)

        setTimeout((arg)=>{
            console.log(arg)

            setTimeout((arg)=>{
                console.log(arg)

            }, 1000, "네번째 콜백")
        }, 1000, "세번째 콜백")
    }, 1000, "두번째 콜백")
}, 1000, "첫번째 콜백")

このようなコールバック地獄の問題により可読性も低下し,ES 6にはpromiseオブジェクトが出現した.

promise(resolve, reject) + then, catch

promisオブジェクトは,コールバック関数のコールバック地獄を解決するために現れる.

const test = new Promise((resolve, reject)=>{
    if(resolve){
        resolve("성공")
    }
    if(reject){
        reject("실패")
    }
});
  
console.log(test) // Promise { <pending> }

ただし、promisを使用して非同期処理を行うと、戻り値はpromisオブジェクトに戻り、thenとcatchが使用されます.

const test = new Promise((resolve, reject)=>{
    if(resolve){
        resolve("성공")
    }
    if(reject){
        reject("실패")
    }
});
  
test.then(result=>{
    return console.log(result)
	})
  .catch(err=>{
 	return console.log(result)
	})
	// "성공"

promisを使用すると、成功時にthenのパラメータのように使用でき、失敗時にcatchに含めて異常処理を行うことができます.
3つの基本情報オブジェクトのステータス
Pending(待機):未完了
Fulfilled(実行):完了ステータス
Rejected(失敗):失敗ステータス

async & await

ES 2017の構文は、promisオブジェクトをより使いやすいのがasync&awaitです.

const test = async () => {
    const test =  await 비동기함수
}

このように関数の前にasyncを付け、awaitで非同期コードを呼び出してすぐに使用できるようにします.
非同期処理方式は、状況に応じて使用することができる.
注意:

https://developer.mozilla.org/ko/docs/conflicting/Learn/JavaScript/Asynchronous/Promises

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/