2.4 async/await分析

async/await=>承諾の使用を試みます

async function a() {
	const a = await 1; // await -> then
    console.log('a', a);
    console.log('hello);
    await null;
    const b = await Promise.resolve(1);
    console.log('b', b);
    return b;
}
==> Promise로 바꾸면...100%는 아니지만 이런 식으로 된다
Promise.resolve(1)
	.then((a) => {
    	console.log('a', a);
    	console.log('hello);
        return null;
    })
    .then(() => {
    	return Promise.resolve(1);
    })
    .then((b) => {
    	console.log('b', b);
        return b;
    })
    
a().then((result) => {
	console.log(result);
}).then((result2) => {
	console.log(result2);
});

* async/await는 오른쪽 부터 분석하자
* promise의 then의 부분은 await와 다음 await까지 코드라고 생각하자

async/awaitコード分析

async function a() {
	console.log('jin');
	const a = await 1; // await -> then
    console.log('a', a);
    console.log('hello');
    await null;
    const b = await Promise.resolve(5);
    console.log('b', b);
    return b;
}

console.log('spear');

a().then((result) => {
	console.log(result);
}).then((result2) => {
	console.log(result2);
});
console.log('park');

* 결과: spear, jin, park, a 1, hello, b 5, 5, undefined

絵を見ながら分析してみましょう

匿名のユーザーが呼び出され、コンソール.log(「矛」)が動作して消えます.

a関数を呼び出し、バックグラウンドに2つの関数を格納します.

コンソールは

a関数にあります.log(「jin」)が実行されて消え、3つのawait関数がバックグラウンドに格納されます.

console.log(「park」)が実行され、消えます.

呼び出しスタックが空の場合、await関数およびその後の関数はマイクロキューに順次移動する.

コールスタックは空で、wait(1)からコールスタックに移動します.

console.log(「a」,a)が呼び出され、消え、コンソール.ログ(「hello」)が呼び出され、消えます.

await(1)関数が終了すると、await(null)は呼び出しスタックに移動する.

次の関数も呼び出しスタックに順次ジャンプして終了します.

むやみに騒ぐな

async function a() {
	await delayP(3000);
    await delayP(6000);
    await delayP(9000);
}
=> 우리는 3초, 6초, 9초후의 함수가 실행되기를 원했지만...
다음 같이 await를 남발하면, 3초, 9초, 18초의 결과를 얻게 된다

async function b() {
	const p1 = delayP(3000);
    const p2 = delayP(6000);
    await Promise.all([p1, p2]);
    await delayP(9000);
}
=> 다음 같이 하면 우리가 원하는 3초, 6초, 9초의 결과를 얻을 수 있다
* Promise.all등 메소드를 사용하면 동시에 실행이 가능하다
* promise는 기본적으로 바로 실행이 되고, 결과 값이 나오고, 결과값을 사용한다
* 하지만 우리는 실행이되고, 결과 값이 나오기 전에 결과값을 사용하기를 원한다.
* 그때 사용하는 메소드가 then, await인 것이다