非同期-Promise/async&await

普段よく使われていますが、今思えば正解(?)まだコンセプトが見つかっていないようなので、改めて整理しようと文章を書きました.また、Promiseとasync&awaitについては、どのような場合に使用するのがより効果的かをそれぞれ理解します.
Promise
callbackの欠点無限callback関数実行(callback地獄)を解決するために現れる文法
async & await
promiseをより簡潔に、より同期させるために設計された構文
次に例を示します.

function fetchUser() {
	// 서버 api 통신 후 10초 후에 데이터 받아오는 코드 ...
    return userName;
}

const user = fetchUser(); // fetchUser를 통해 값을 받아 오기
console.log(user); // 콘솔에 출력

JavaScriptエンジンは、デフォルトでは実行コードが同期されるため、上記の時間のかかる処理を非同期化しない場合、fetchUserに10秒滞在します.
その後、UIを処理するコードが上のコードブロックにある場合、ユーザは、終了時にデータがページに表示されないため、10秒以内に空白のページを見ることができる.

1)使用許諾の場合

function fetchUser() {
    return new Promise((resolve, reject) => {
    	return userName;
    });
}

上のコードはいつ関数を呼び出すか分かりませんが、いつでもコールバック関数を登録すれば、ユーザーのデータが準備されている限り、登録されたコールバック関数を呼び出すことを意味します.
ただし、ここでresolveとexceptを呼び出さずに直接値を返すとPromise {<pending>}の状態になります.つまり、何の呼び出しも行われていないため、「待機」状態となる.
計画には、「保留中」、「完了」、「投射済」の3つのステータスがあります.これらのステータスは次のとおりです.

保留(代替):非同期処理ロジックがまだ完了していません

Fulfilled(履行済み):非同期処理を完了し、プロセスから結果値

を返す

Rejected(失敗):非同期処理の失敗またはエラー

function fetchUser() {
    return new Promise((resolve, reject) => {
    	resolve(userName);
    });
}

したがって、resolveを使用して値を返すと、promiseの状態はPromise {<fulfilled>: "chaticker"}になり、値を返す.
その後thenを使用して次のコールバック関数を実行できます.

function fetchUser() {
    return new Promise((resolve, reject) => {
    	resolve(userName);
    });
}

const user = fetchUser(); // fetchUser를 통해 값을 받아 오기
user.then(console.log(...))

async&awaitについて説明します.これは、この承諾を使用するより簡単な方法です.

2)async-awaitの使用

既存のコードでは、関数の前にasyncを付けると、promise構文を使用する必要がなく、コードブロックは自動的にpromiseに変換されます.

async function fetchUser() {
    return userName;
}

const user = fetchUser(); // fetchUser를 통해 값을 받아 오기
user.then(console.log(...))

では、awaitはどんな場合に使いますか?

function delay(ms){
  	/* 정해진 ms가 지나면 resolve를 리턴하는 promise */
	return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple(){
	await delay(3000);
  	return '🍎'
}

async function getBanana(){
	await delay(3000);
  	return '🍌'
}

上記のコードでawaitを使用するとdelay関数が呼び出され、取得値が待機します.3秒後🍎そしてそれを返します.
上のコードをpromiseにすると、

function getBanana(){
	return delay(3000)
  	.then(() => '🍌');
}

同じコードであるべきで、このようにします.then()のフィルタリング方式に比べて、同期のように見えるawaitを使用すると、コードの作成がより簡潔で分かりやすくなります.
以下のコードはasync&awaitを用いた明確な原因の説明とすることができる.
promiseを使うのはコールバックのようです.そして()地獄に陥る可能性はあるがasync&awaitを用いてcallback地獄なしで簡潔なコードを生成することができる.

/* 기존 promise를 사용하는 경우 */
function pickFruits(){
	return getApple()
  	.then(apple => {
    	return getBanana()
      	.then(banana => `${apple} + ${banana}`);
    });
}
pickFruits().then(console.log);// 6초 뒤 콘솔에 결과 값이 나타남 

/* async & await를 사용하는 경우 */
async function pickFruits(){
  	const apple = await getApple();
  	const banana = await getBanana();
  	return `${apple} + ${banana}`;
}

しかしながら、並列処理については、各メソッドに対してpromiseを生成して呼び出した後、以下のような並列処理を行うことができるが、コードが長く効率が低いため、promiseを用いた特定api all()が有効である.

/* async & await으로 병렬처리 할 경우 */
async function pickFruits(){
  	const applePromise = getApple();
  	const bananaPromise = getBanana();
  	const apple = await applePromise();
  	const banana = await bananaPromise();
  	return `${apple} + ${banana}`;
}

/* Promise.all로 병렬처리 할 경우 */
function pickAllFruit() {
	return Promise.all([getApple(), getBanana()]) // 각각의 promise 호출
  	.then(fruits => fruits.join(' + '));
}
pickAllFruit().then(console.log); // 병렬처리가 되어 결과 값이 동시에 출력 됨

リファレンス