TIL#41 JS)JavaScriptの非同期化
11479 ワード
JavaScript
JavaScriptは、同期言語、ブロック言語、および単一スレッド言語です.これは、1回に1回しか作業できない特性を意味します.しかし、これらの特性はJavaScriptのすべてのコンテンツを意味するものではありません.
大量のデータベースを要求する必要がある場合は、どうすればいいですか?同期処理の場合、1つのタスクを要求して応答を待つ場合、別のタスクを待つ必要がある場合があります.そうすると、仕事の処理に時間がかかります.
JAvascriptは、これらの問題を解決するためのソリューションを提供します.JavaScriptを非同期言語と勘違いしているのは、JavaScriptを非同期で実行できるからです.
JavaScriptの非同期処理
これはJavaScriptの特性が,特定のコードの演算が終了するまでコードの実行を停止することなく,先に次のコードを実行することを意味する.
非同期処理
1. Callback
calback関数は、パラメータとして特定の関数に渡される関数を表します.コールバック関数は、関数を渡す関数で呼び出されます.
同期処理で最も簡単な解決策は非同期callbackを使用することである.
function Callback(callback){
console.log('콜백 함수');
callback();
}
Callback(function(){
console.log('콜백 받는곳');
})
関数の戻り値を受け取った後に非同期処理を行う必要がある場合は、上記の関数をコールバックとして非同期処理を行うことができます.しかし,コールバック関数は可読性が悪いため,エラーのリスクも増大する.非同期処理が次のように3つで終わらない場合、果てしなく横になったピラミッドが描画されます.
function Callback(callback){
function Callback2(callback){
function Callback3(callback){
console.log('무한콜백');
}
}
}
このような無限コールバックを解決するために、ES 7はPromiseをサポートし、ES 8はasync/awaitをサポートする.2. Promise
Promiseは、JavaScriptで非同期タスクをより容易に処理するためにCalbackと同じ役割を果たすES 6に導入された機能です.
違いは、完了後に実行される関数ではなく、プロセスが独自の方法を提供することです.そしてコール().そして.その後、()のような方法を連続的に使用することができ、コードの記述および理解をより容易にすることができる.
const promise = new Promise ((resolve, reject) => {
//executor 실행자, 실행 함수..
})
resolveはnew Promiseの作成時に自動的に実行されます.executorのパラメータ解析、拒否はJavaScript自身が提供するコールバックです.resolve
:ジョブが正常に完了すると、結果を示す値とともに呼び出されます.reject
:エラーが発生した場合、エラーの対象を示すエラーとともに呼び出されます.Promiseの3つの状態
プロセスには3つのステータスがあり、ステータスはプロセスの処理プロセスを意味します.new Promise()を使用してプロセスを作成および終了します.3つのステータスがあります.
Pending
:非同期処理ロジック未完了(待機)Fulfilled
:非同期処理が完了し、プロセスによって結果値が返された状態(成功)Rejected
:非同期処理に失敗またはエラーが発生した状態(失敗)Promiseでの異常処理
add10(10)
.then((res) => {
throw 'test error';
})
.catch((err) => console.log(err));
promiseは、タスクが失敗したときに自動的に実行されます.catch()メソッドを呼び出します.既存のtry-catchを使用して例外処理を行うことができますが、javascriptはpromiseのcatchを使用するように警告メッセージを出力します.3. async/await
async/awaitはES 8構文としてpromiseに基づく最新構文である.これを使用すると、非同期の状況をより簡単に表現できます.
async function 함수명(){
await 비동기처리_메서드명();
}
asyncとawaitを使用するには、まず使用する関数の前にasyncキーを付け、宣言したasync関数でawaitキーのみを使用する必要があります.awaitは、関数がタスクを完了するのを待って結果値を返し、結果値が返されると次のタスクに移動します.
async
asyncは関数の前にあります.functionの前にasyncを付けると、この関数は常にpromiseを返します.
await
待つと約束が処理されるまで待つ.結果はその後返されます.一般関数では使用できません.async関数ではなくawaitを使用すると、構文エラーが発生します.上述したように,待機はasync関数でのみ発生する.
async/awaitの異常処理
async function f1() {
const a = await add10(10).then(res => res);
const b = await add10(a).catch(err => err);
console.log(a, b);
}
f1();
// f1은 promise를 리턴하므로 promise가 지원하는 메소드 사용 가능
async function f2() {
try {
const a = await add10(10);
const b = await add10(a);
console.log(a, b);
} catch(err) {
console.log(err);
}
}
f2();
Reference
この問題について(TIL#41 JS)JavaScriptの非同期化), 我々は、より多くの情報をここで見つけました https://velog.io/@threeplef/TIL41-JS-자바스크립트비동기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol