> 웹 프론트엔드 > JS 튜토리얼 > Promise.all은 효율성 향상을 위해 비동기식 URL 가져오기를 어떻게 간소화할 수 있습니까?

Promise.all은 효율성 향상을 위해 비동기식 URL 가져오기를 어떻게 간소화할 수 있습니까?

DDD
풀어 주다: 2024-10-28 04:36:30
원래의
438명이 탐색했습니다.

How can Promise.all Streamline Asynchronous URL Fetching for Enhanced Efficiency?

비동기 URL 가져오기: 효율성 향상을 위해 Promise.all 활용

Promise.all 유틸리티는 시퀀스를 동시에 실행하기 위한 중추적인 수단으로 사용됩니다. 비동기 작업의 URL 배열을 가져오는 작업을 시작하면서 해당 텍스트 콘텐츠를 캡슐화하는 유사한 배열을 얻는 것을 목표로 합니다. 이 노력을 자세히 살펴보기 전에 시도한 특정 접근 방식의 단점에 대해 잠시 생각해 볼 필요가 있습니다.

아래 스니펫은 목표를 달성하려고 시도하지만 부족합니다.

var promises = urls.map(url => fetch(url));
var texts = [];
Promise.all(promises)
  .then(results => {
     results.forEach(result => result.text()).then(t => texts.push(t))
  })
로그인 후 복사

먼저, 이 구현은 개념적으로 결함이 있습니다. forEach 함수가 배열이나 약속을 반환하지 않아 효과가 없게 되기 때문입니다. 둘째, 코드에는 텍스트 추출의 비동기 특성을 적절하게 처리하는 데 필요한 중첩이 부족합니다.

이러한 단점을 해결하려면 다각적인 접근 방식이 필요합니다. 먼저 URL 배열에서 Promise.all을 호출하여 개별 가져오기 작업을 나타내는 Promise 배열을 검색합니다. 이러한 초기 가져오기가 성공적으로 완료되면 두 번째 Promise.all 호출이 사용되어 응답 본문에서 텍스트 콘텐츠를 캡처합니다. 그런 다음 캡슐화된 텍스트 값이 응집력 있는 배열로 집계됩니다. 이 접근 방식의 핵심은 다음 코드로 우아하게 표현됩니다.

Promise.all(urls.map(u => fetch(u))).then(responses =>
    Promise.all(responses.map(res => res.text()))
).then(texts => {
    // Proceed with texts array...
})
로그인 후 복사

이 전략의 단순화된 변형에는 초기 가져오기 약속 이행 중에 응답 본문을 직접 추출하는 작업이 포함됩니다.

Promise.all(urls.map(url =>
    fetch(url).then(resp => resp.text())
)).then(texts => {
    // Proceed with texts array...
})
로그인 후 복사

또는 wait를 사용하여 더욱 간결하게:

const texts = await Promise.all(urls.map(async url => {
  const resp = await fetch(url);
  return resp.text();
}));
로그인 후 복사

위 내용은 Promise.all은 효율성 향상을 위해 비동기식 URL 가져오기를 어떻게 간소화할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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