ホームページ > 記事 > ウェブフロントエンド > マップ内で非同期関数を使用すると、Promise.all が未定義の値の配列で解決されるのはなぜですか?
Promise は、コードの可読性とフロー制御の向上を可能にする非同期プログラミング モデルを提供します。ただし、予期せぬ問題が発生する場合もあります。この質問では、Promise.all が未定義の配列を返し、途中で解決される理由を探ります。
問題のコードは、典型的な Promise チェーン パターンに従います。
<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>
問題の根本原因は、map コールバック関数の return ステートメントが欠落していることにあります。 Promise.all は Promise オブジェクトの配列を期待しますが、リターンがないと、コールバックはクエリ配列の各要素に対して undefined を返します。
その結果、Promise.all は、事前にであっても、即座に unknown の配列で解決されます。マップ内の実際の 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 中国語 Web サイトの他の関連記事を参照してください。