Home > Web Front-end > JS Tutorial > Why is Promise.all resolving with an array of undefined values when using async functions within a map?

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

DDD
Release: 2024-11-02 09:27:02
Original
680 people have browsed it

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

Promise.all Resolving Array of Undefined: Unveiling the Mystery

Promises provide an asynchronous programming model, enabling improved code readability and flow control. However, sometimes, unanticipated issues arise. This question explores why a Promise.all is returning an array of undefined and resolving prematurely.

The code in question follows a typical promise-chaining pattern:

<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>
Copy after login

After successfully completing the initial operations, the issue arises within the addText function:

<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>
Copy after login

The root cause of the problem lies in the missing return statement in the map callback function. Promise.all expects an array of Promise objects, but without the return, the callback returns undefined for each element in the queries array.

As a result, Promise.all immediately resolves with an array of undefined, even before the actual Promises inside the map have a chance to resolve. This premature resolution leads to the unexpected behavior and an array of undefined values.

To rectify the issue, it's crucial to add the return statement before each Promise invocation in the addText function:

<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>
Copy after login

Now, Promise.all will correctly wait for all Promises in the array to resolve, resulting in the expected output containing the query results.

The above is the detailed content of Why is Promise.all resolving with an array of undefined values when using async functions within a map?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template