2.4 async/await分析
2583 ワード
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
絵を見ながら分析してみましょうむやみに騒ぐな
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인 것이다
Reference
この問題について(2.4 async/await分析), 我々は、より多くの情報をここで見つけました https://velog.io/@spearjin/2.4-asyncawait-분석テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol