>웹 프론트엔드 >JS 튜토리얼 >`Promise.all`을 사용하여 URL 배열에서 데이터를 검색하고 해당 텍스트 콘텐츠 배열을 생성하려면 어떻게 해야 합니까?

`Promise.all`을 사용하여 URL 배열에서 데이터를 검색하고 해당 텍스트 콘텐츠 배열을 생성하려면 어떻게 해야 합니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-10-29 02:38:02376검색

How can I use `Promise.all` to retrieve data from an array of URLs and create a corresponding array of text content?

URL 배열 검색을 위해 Promise.all 활용

웹 요청을 처리할 때 여러 소스에서 데이터를 검색하는 것은 일반적인 작업일 수 있습니다. Promise.all은 여러 비동기 작업을 동시에 실행하고 그 결과를 단일 Promise로 결합할 수 있는 JavaScript의 유용한 도구입니다.

문제:
URL 배열을 사용하고 URL 배열의 구조를 반영하지만 각 URL의 텍스트 파일 내용을 포함하는 개체를 생성하는 것을 목표로 합니다.

var urls = ['1.txt', '2.txt', '3.txt']; // These files contain "one", "two", "three" respectively.
var result = ['one', 'two', 'three']; 

Promise.all로 접근:
처음에 Promise.all을 사용하여 이 문제를 해결하려고 하면 어려움에 직면할 수 있습니다. 결함이 있는 접근 방식을 살펴보겠습니다.

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

여기서 Promise.all은 가져오기 요청을 나타내는 Promise 배열에 적용됩니다. 그러나 이 접근 방식은 의도한 대로 원하는 ['1', '2', '3'] 배열을 생성하지 못합니다. 이 문제를 해결하려면 다음과 같은 세련된 솔루션을 고려하십시오.

Promise.all(urls.map(u => fetch(u))).then(responses =>
  Promise.all(responses.map(res => res.text()))
).then(texts => {
  …
});

이 코드는 모든 URL에 대한 가져오기 요청을 시작한 다음 응답을 처리하여 각 URL의 텍스트 콘텐츠를 검색합니다. 결과는 추가로 처리할 수 있는 텍스트 값의 배열입니다. 또는 최신 JavaScript 기능을 사용하여 코드를 단순화할 수 있습니다.

const texts = await Promise.all(urls.map(async url => {
  const resp = await fetch(url);
  return resp.text();
}));

여기에서는 async/await 구문을 사용하여 비동기 작업을 보다 간결하게 처리합니다.

Promise.all을 다음과 같이 신중하게 사용합니다. 이러한 기술을 사용하면 일련의 URL에서 데이터를 효과적으로 가져오고 처리하여 후속 데이터 조작 작업을 위한 기반을 마련할 수 있습니다.

위 내용은 `Promise.all`을 사용하여 URL 배열에서 데이터를 검색하고 해당 텍스트 콘텐츠 배열을 생성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.