>  기사  >  웹 프론트엔드  >  맵 내에서 비동기 함수를 사용할 때 Promise.all이 정의되지 않은 값 배열로 확인되는 이유는 무엇입니까?

맵 내에서 비동기 함수를 사용할 때 Promise.all이 정의되지 않은 값 배열로 확인되는 이유는 무엇입니까?

DDD
DDD원래의
2024-11-02 09:27:02585검색

Why is Promise.all resolving with an array of undefined values when using async functions within a map?

Promise.all 정의되지 않은 배열 해결: 미스터리 공개

Promise는 비동기 프로그래밍 모델을 제공하여 향상된 코드 가독성과 흐름 제어를 가능하게 합니다. 그러나 때로는 예상치 못한 문제가 발생하기도 합니다. 이 질문은 Promise.all이 정의되지 않은 배열을 반환하고 조기에 해결되는 이유를 탐구합니다.

문제의 코드는 일반적인 약속 연결 패턴을 따릅니다.

<code class="javascript">const getQueries = (models, dbId, dateStart, dateEnd) => {
  return new Promise((resolve, reject) => {
    // Fetch database and perform operations
    .then(extractQueries, reject)
      .then(sortQueries, reject)
      .then(onlyTen, reject)
      .then(addText, reject)
      .then((queries) => {
        console.log("getQueries finished", queries);
        resolve(queries);
      }, reject);
  });
};</code>

초기 코드를 성공적으로 완료한 후 작업 중에 문제는 addText 함수 내에서 발생합니다.

<code class="javascript">const addText = (queries) => {
  return Promise.all(queries.map((query) => {
    // Oops! We're missing a `return` here!
    models.queries.findById(query.queryId, {
      raw: true,
      attributes: ["query"],
    })
      .then((queryFetched) => {
        query.text = queryFetched.query;
        console.log(query);

        return Promise.resolve(query);
      }, (error) => {
        return Promise.reject(error);
      });
  }));
};</code>

문제의 근본 원인은 지도 콜백 함수에 반환 문이 누락되어 있기 때문입니다. Promise.all은 Promise 객체의 배열을 기대하지만 반환이 없으면 콜백은 쿼리 배열의 각 요소에 대해 정의되지 않은 값을 반환합니다.

결과적으로 Promise.all은 이전에도 정의되지 않은 배열로 즉시 해결됩니다. 맵 내부의 실제 Promise에는 해결 기회가 있습니다. 이러한 성급한 해결은 예상치 못한 동작과 정의되지 않은 값의 배열로 이어집니다.

문제를 해결하려면 addText 함수의 각 Promise 호출 앞에 return 문을 추가하는 것이 중요합니다.

<code class="javascript">const addText = (queries) => {
  return Promise.all(queries.map((query) => {
    return models.queries.findById(query.queryId, {
      raw: true,
      attributes: ["query"],
    })
      .then((queryFetched) => {
        query.text = queryFetched.query;
        console.log(query);

        return Promise.resolve(query);
      }, (error) => {
        return Promise.reject(error);
      });
  }));
};</code>

이제 Promise.all은 배열의 모든 Promise가 해결될 때까지 올바르게 대기하여 쿼리 결과가 포함된 예상 출력을 생성합니다.

위 내용은 맵 내에서 비동기 함수를 사용할 때 Promise.all이 정의되지 않은 값 배열로 확인되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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