JavaScript の約束をマスターする: ポリフィルと高度なテクニックのガイド

はじめに: JavaScript の非同期機能のロックを解除する

JavaScript の非同期機能を操作するのは複雑な場合がありますが、それらをマスターすると、コーディング スキルとアプリケーションのパフォーマンスが大幅に向上します。このガイドでは、JavaScript Promise の重要なツールについて詳しく説明し、特に Promise.any、Promise.allSettled、および Promise.race のポリフィルを実装する方法に焦点を当てます。これらのツールは、複数の非同期操作をより効果的に処理したいと考えている Web 開発者にとって非常に貴重です。

約束の簡素化

JavaScript の Promise は、非同期操作による将来の結果に対する契約のようなものです。これらは、サーバーからのデータの取得など、完了までに時間がかかるタスクの管理に役立ちます。ただし、Promise が異なれば、提供されるユーティリティも異なります:

• Promise.any: 提供された Promise のいずれかが解決されると解決されます。
• Promise.allSettled: 履行されたか拒否されたかに関係なく、すべての Promise が解決された後に解決します。
• Promise.race: Promise の 1 つが解決または拒否されるとすぐに解決または拒否されます。

互換性を強化するためのポリフィルの実装

古いブラウザや環境では、これらの新しい Promise メソッドがサポートされていない場合があります。そこでポリフィルの出番です。ポリフィルの実装方法を見てみましょう:

1. Promise.any のポリフィル

   if (!Promise.any) {
     Promise.any = function (promises) {
       return new Promise((resolve, reject) => {
         promises = Array.isArray(promises) ? promises : [];
         let errors = [];
         let resolved = false;

         promises.forEach((promise, index) => {
           promise.then(result => {
             if (!resolved) {
               resolved = true;
               resolve(result);
             }
           }).catch(error => {
             errors[index] = error;
             if (errors.length === promises.length) {
               reject(new AggregateError(errors, 'All promises were rejected'));
             }
           });
         });
       });
     };
   }

説明: このコードは、Promise.any が使用できないかどうかを確認し、それを定義します。 Promise が解決されるとすぐに解決しようとします。すべての Promise が失敗した場合、AggregateError で拒否されます。

1. Promise.allSettled のポリフィル

   if (!Promise.allSettled) {
     Promise.allSettled = function (promises) {
       return Promise.all(promises.map(p => Promise.resolve(p).then(value => ({
         status: 'fulfilled',
         value
       }), reason => ({
         status: 'rejected',
         reason
       }))));
     };
   }

説明: このポリフィルは、各 Promise を、元の Promise が履行されたか拒否されたかを示すオブジェクトで解決される新しい Promise に変換します。

1. Promise.race のポリフィル

   if (!Promise.race) {
     Promise.race = function (promises) {
       return new Promise((resolve, reject) => {
         promises.forEach(promise => {
           Promise.resolve(promise).then(resolve, reject);
         });
       });
     };
   }

説明: この関数は、入力 Promise の 1 つが解決または拒否されるとすぐに解決または拒否されます。

ベストプラクティスと使用シナリオ

これらのポリフィルを使用すると、アプリケーションがすべてのブラウザで確実に動作するだけでなく、信頼性も向上します。各ポリフィルされた Promise メソッドが特に役立つシナリオを次に示します:

• Promise.any の使用: 複数のバックアップ データ ソースから迅速な応答が必要な場合に最適です。
• Promise.allSettled の適用: 互いに依存しない複数の操作を実行し、その結果をまとめて処理する必要がある場合に最適です。
• Promise.race の活用: タイムアウトに対して Promise を競い合い、最初に完了したものに基づいて動作するタイムアウト パターンに役立ちます。

結論: JavaScript ツールセットを強化する

これらの高度な Promise 機能とそのポリフィルを理解して実装することで、非同期 JavaScript をより上手に処理できるようになります。この知識は、開発プロセスを合理化するだけでなく、アプリケーションがさまざまな環境で最適に実行できるように準備します。これらのテクニックを詳しく見て、アプリケーションがより堅牢で信頼性が高くなることを確認してください。

最終的な考え

これらの高度な Promise テクニックとポリフィルを活用して、JavaScript プロジェクトが最先端かつ包括的なものであり続けるようにしてください。今すぐ非同期操作をアップグレードする準備はできていますか?

以上がJavaScript の約束をマスターする: ポリフィルと高度なテクニックのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。