Async/await는 훌륭하지만 Promise를 버리지 마십시오.
Cassidy Williams에게 외침 😀다음과 같은 버튼을 만들어 보겠습니다.
다음은 마크업입니다.
기능은 다음과 같습니다. 또한 Chrome DevTools 성능 타임라인에서 각 기능이 실행되는 시기와 기간을 시각화하는 Performance API 을 사용하여 각 작업의 기간을 측정해 보겠습니다. (더미 엔드포인트에 대해 JSONPlaceholder에게 감사드립니다.)
<script id="gist-ltag"src="https://gist.github.com/suhanw/8e984392ffc4974e3654dda7082c6aff.js"/>
<시간/>
아직 계세요? 좋습니다. 흥미로운 부분이 있습니다. 버튼에 대한 onclick 핸들러를 작성하는 것입니다. 쿨한 애들은 다 하고 있으니 async / await를 써보자.
async function handleClick() {
someSyncOperation(); // Expensive sync operation
const postJson = await fetchPost(); // AJAX request #1
const commentsJson = await fetchComments(); // AJAX request #2
appendPostDOM(postJson);
appendCommentsDOM(commentsJson);
}
다음은 버튼을 클릭한 후의 성능 타임라인입니다.
자세히 살펴보겠습니다.
비동기 코드를 차단 코드로 바꾸는 방법async / await에 대한 많은 기사가 있습니다. 참고로 각 막대는 네트워크를 '느린 3G'로 제한할 때 약 2초입니다.
따라서 총 실행 시간은 6초입니다.
<시간/>
좋아요. fetchPost와 fetchComments는 병렬로 실행할 수 있으므로 await Promise.all 콤보를 사용합시다.
async function handleClick() {
someSyncOperation();
const [postJson, commentsJson] = await Promise.all([
fetchPost(),
fetchComments()
]);
appendPostDOM(postJson);
appendCommentsDOM(commentsJson);
}
fetchPost 및 fetchComments가 병렬로 실행된 이후 총 실행 시간은 이제 4초입니다.
<시간/>
좋아요. someSyncOperation는 AJAX 요청에 종속되지 않으므로 함수의 마지막 줄로 이동하면 작업 속도가 빨라지는지 살펴보겠습니다.
async function handleClick() {
const [postJson, commentsJson] = await Promise.all([
fetchPost(),
fetchComments()
]);
appendPostDOM(postJson);
appendCommentsDOM(commentsJson);
someSyncOperation();
}
아니요, 총 실행 시간은 여전히 4초입니다.
<시간/>
좋아요. "풀Promise"로 갈 시간입니다.
function handleClick() {
Promise.all([
fetchPost(),
fetchComments()
]).then(([postJson, commentsJson]) => {
appendPostDOM(postJson);
appendCommentsDOM(commentsJson)
});
someSyncOperation();
}
"전체Promise"로 이동하면 총 실행 시간이 2초로 단축됩니다.
이것이 작동하는 이유는 자체 기사가 필요하지만 here is an awesome explainer .
오늘 배웠습니다.
<시간/>
<시간/>
보너스
열혈 팬async / await을 위해 다음 스니펫이 실제로 같은 일을 한다는 것을 (문자 그대로 이 이야기를 쓰는 날에) 배웠습니다. this article이 Moon에 크레딧을 제공합니다.
async function handleClick() {
const postPromise = fetchPost();
const commentsPromise = fetchComments();
someSyncOperation();
const postJson = await postPromise;
const commentsJson = await commentsPromise;
appendPostDOM(postJson);
appendCommentsDOM(commentsJson);
}
<시간/>
📫 나에게 연락 또는 !
Reference
이 문제에 관하여(Async/await는 훌륭하지만 Promise를 버리지 마십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/suhanw/async-await-is-awesome-but-don-t-abandon-promises-47po텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
