> 웹 프론트엔드 > JS 튜토리얼 > `await arr.map()`이 실패하는 이유는 무엇이며 `Promise.all`은 어떻게 해결할 수 있나요?

`await arr.map()`이 실패하는 이유는 무엇이며 `Promise.all`은 어떻게 해결할 수 있나요?

DDD
풀어 주다: 2024-12-12 20:52:14
원래의
148명이 탐색했습니다.

Why Does `await arr.map()` Fail, and How Can `Promise.all` Fix It?

Async Await 및 Array.map Synergy 이해

코드 조각에서:

var arr = [1,2,3,4,5];

var results: number[] = await arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
});
로그인 후 복사

"TS2322: Type 'Promise< ;number>[]'는 'number[]'' 유형에 할당할 수 없습니다. 이 오류는 예상 유형(number[])과 실제 유형(Promise[])이 일치하지 않음을 나타냅니다. 이 문제를 해결하려면 async Wait와 Array.map이 어떻게 상호 작용하는지 이해해야 합니다.

문제

문제는 배열을 기다리려고 하기 때문에 발생합니다. Promise(Promise[])는 단일 Promise를 기다리는 것과 다릅니다. wait는 Promise가 아닌 객체에 적용될 때 즉시 값을 반환합니다. 이 상황에서는 Promise 객체의 배열을 기다리고 있으므로 결과 값은 배열 자체(Promise[])입니다.

해결책

이 오류를 수정하려면 Promise.all을 활용하여 Promise[] 배열을 단일 Promise로 변환할 수 있습니다. MDN 문서에 따르면 Promise.all은 iterable 인수 내의 모든 약속이 해결되면 해결됩니다. 코드에서 반복 가능한 인수는 arr.map에서 반환된 Promise 배열입니다.

Promise.all을 사용하면 Promise 배열을 단일 Promise로 변환하여 모든 Promise의 해결을 기다릴 수 있습니다.

var arr = [1, 2, 3, 4, 5];

var results: number[] = await Promise.all(arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
}));
로그인 후 복사

또는 상황에 따라 Promise.allSettled, Promise.any 또는 Promise.race를 사용하는 것도 고려해 보세요. 특정 사용 사례. 그러나 제공하신 시나리오에서는 Promise.all이 여전히 가장 적절한 선택입니다.

위 내용은 `await arr.map()`이 실패하는 이유는 무엇이며 `Promise.all`은 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿