フロントエンドJavaScriptの約束

1. Promiseとは何か

Promiseは非同期プログラミングのためのソリューションです。 ES6 ではすでにネイティブのPromiseオブジェクトが提供されています。 Promiseオブジェクトは、次の状態になります ( fulfilledおよびrejected状態は、確認されると変更されません)。

pending :引き換えも拒否もされていない初期状態。
fulfilled :操作が正常に完了したことを意味します。
rejected :操作が失敗したことを意味します。

2. 基本的な使い方

Promiseオブジェクトは、 Promiseインスタンスを作成するために使用されるコンストラクターです。このオブジェクトは、 resolveとreject 2 つのパラメーターを受け取ります。

resolveの機能は、 Promiseオブジェクトの状態をpendingからfulfilledに変更することです。非同期操作が成功したときに呼び出され、非同期操作の結果をパラメータとして渡します。
rejectの機能は、 Promiseオブジェクトの状態をpendingからrejected変更することです。非同期操作が失敗したときに呼び出され、非同期操作によって報告されたエラーがパラメータとして渡されます。

const promise = new Promise(function(resolve, reject) {
  // ... 
  if (/* 非同期操作が成功しました*/){
    解決(値);
  } それ以外 {
    拒否(エラー);
  }
});

Promiseインスタンスが生成された後、 thenメソッドを使用して、それぞれfulfilled状態とrejected状態のコールバック関数を指定します。

then 、2 つのパラメータを受け取ります。1 つ目は、 Promiseオブジェクトの状態がfulfilledになったときのコールバック関数であり、2 つ目は、状態がrejectedなったときのコールバック関数です。
catch Promiseオブジェクトの状態がrejectedたときにコールバック関数を受け取ります。

promise.then(関数 (値){
 // ....
},関数(エラー){
 // .... エラー
})
  
promise.then(関数 (値){
 // ....
}).catch(関数(err){
    // ....
})

3. Promiseメソッド

3.1 Promise.prototype.then()

thenメソッドは、プロトタイプオブジェクトPromise.prototypeで定義されます。前述のように、このメソッドは 2 つのオプションパラメータを受け入れます。最初のパラメータは、 fulfilled状態のコールバック関数であり、2 番目のパラメータは、 rejected状態のコールバック関数です。

thenメソッドは新しいPromiseインスタンスを返すため、チェーン記述を使用するのに便利です。たとえば、 then 」と記述すると、最初のコールバック関数が完了すると、返された結果が 2 番目のコールバック関数にパラメーターとして渡されます。この連鎖アプローチにより、順番に呼び出されるコールバック関数のセットを簡単に指定できます。

loadData().then(関数(値){
    戻る 3
}).then(関数(数値){
    console.log("ok", 数値) // 3
})

3.2 Promise.prototype.catch()

catchメソッドは、エラーが発生したときにコールバック関数を指定するために使用されます。非同期操作でエラーが発生した場合、状態はrejectedに変わり、 catch()メソッドで指定されたコールバック関数が呼び出されてエラーが処理されます。

const promise = new Promise(function(resolve, reject) {
  throw new Error('unkonw error'); // エラー状態が -> 拒否に変更されるのをスローします
});
const promise = new Promise(function(resolve, reject) {
  拒否('不明なエラー') // 拒否() メソッドを使用して状態を -> 拒否に変更します
});
promise.catch(関数(エラー) {
  コンソール.log(エラー);
});

Promiseオブジェクトのエラーは、キャッチされるまで後方に伝播されます。たとえば、次のコード: catch 、 loadDataと 2 つの then でスローされたエラーをキャプチャします。

loadData().then(function(値) {
  loadData(値)を返します。
}).then(function(users) {
 
}).catch(関数(err) {
  // 最初の 3 つの Promise からのエラーを処理します });

catch()を設定しないと、エラーが発生してもPromiseエラーをスローしません。つまり、外部コードの実行には影響しません。

const promise = new Promise(function(resolve, reject) {
   resolve(a) // ReferenceError: a は定義されていません
});
promise.then(関数(値) {
  console.log('値は', 値)
});
setTimeout(() => { console.log('code is run') }, 1000); // コードが実行される

3.3 Promise.prototype.finally()

finally()メソッドは、 Promiseオブジェクトの最終状態に関係なく操作を実行します。以下は Promise を使用する一般的な構造です。

約束
.then(結果 => {···})
.catch(エラー => {···})
.finally(() => {···});

3.4 Promise.all()

Promise.all()メソッドは、複数のPromiseインスタンスを新しいPromiseインスタンスにラップして返すことができます。

const promise = Promise.all([p1, p2, p3]);

新しいpromise状態は、「受信promise 」に依存します。

すべての「着信promise 」 fulfilled場合にのみ、そのステータスはfulfilledになります。このとき、「着信promise 」の戻り値は配列を形成し、 promiseのコールバック関数に渡されます。
「着信プロミス」の 1 つが拒否された場合、新しいpromiseの状態はrejected 、最初にreject promiseの戻り値がpromiseコールバック関数に渡されます。

const promises = [1,2,3,4].map(function (id) {
  loadData(id) を返します。
});

Promise.all(promises).then(function (users) {
  // ...
}).catch(関数(err){
  // ...
});

3.5 Promise.race()

Promise.race()メソッドは、複数のPromiseインスタンスを新しいPromiseインスタンスにラップします。

Promise.race()メソッドのパラメータは、 Promise.all()メソッドのパラメータと同じです。

const promise = Promise.race([p1, p2, p3]);

Promise.all()とPromise.race () :

Promise.all()すべて正常に実行された場合は成功したすべてのpromise値を返し、いずれかが失敗した場合は最初の失敗した値を返します。
Promise.race()完了した最初のpromise値を返します。この値は、 fulfilledかrejected可能性があります。
これら 2 つの方法の使用シナリオ。

シナリオ 1:ユーザーがソーシャルネットワーキングサイトのホームページにログインした後、ユーザー情報、フォローリスト、ファンリストを取得するよう非同期的に要求します。ページをレンダリングする前に、すべてのデータ要求が成功していることを確認する必要があります。データが失敗すると、ページはリダイレクトされます。ここではPromise.all使用できます。

関数 initUserHome() {
  Promise.all([
  新しいPromise(getMe)、
  新しいPromise(getFollows)、
  新しい Promise(getFans)
])  
    .then(関数(データ){
     // ページを表示する })
    .catch(関数(err){
    // .... リダイレクトページ });
};

ユーザーホームを初期化します。

シナリオ 2:チケット取得ソフトウェアを作成する場合、多くのチケット販売チャネルを要求しますが、毎回最初に完了した Promise のみを返す必要があります。ここでは、 Promise.raceを使用できます。

関数 getTicket() {
  Promise.race([
  新しいPromise(postASell)、
  新しいPromise(postBSell)、
  新しい Promise(postCSell)
])  
    .then(関数(データ){
     // チケット取得成功})
    .catch(関数(err){
    // .... チケットの取得に失敗しました。もう一度お試しください});
};

チケットを取得します。

3.6 Promise.allSettled()

Promise.all()を使用する場合、1 つのPromiseが失敗しても、他の~~Promise は~~実行を停止しません。

const リクエスト = [
  フェッチ('/url1')、
  フェッチ('/url2')、
  フェッチ('/url3')、
];

試す {
  Promise.all(リクエスト)を待機します。
  console.log('すべてのリクエストが成功しました。');
} キャッチ {
  console.log('1 つのリクエストが失敗しました。他のリクエストはまだ完了していない可能性があります。');
}

場合によっては、次のステップに進む前に、非同期操作のグループが完了するまで待機する必要があります。このとき、パラメータが配列であり、配列の各メンバーがPromiseオブジェクトであり、新しいPromiseオブジェクトを返すPromise.allSettled()使用する必要があります。パラメータ配列内のすべての Promise オブジェクトのステータス ( fulfilledまたはrejectedのいずれか) が変更されるまで待機し、返されたPromiseオブジェクトのステータスが変更されます。

const リクエスト = [
  フェッチ('/url1')、
  フェッチ('/url2')、
  フェッチ('/url3')、
];

Promise.allSettled(リクエスト) を待機します。
console.log('すべてのリクエストが完了した後に実行します (成功と失敗を含む)');

3.7 Promise.any()

受信したPromiseの 1 つがfulfilledれると、新しいPromiseもfulfilledれます。受信したPromiseすべてrejectedれると、新しい Promise も拒否されます。

Promise.any()はPromise.race()に似ていますが、違いは、特定のPromiseがrejectedたためにPromise.any()終了しない点です。すべてのパラメータPromiseがrejectedれるまで待機する必要があります。

mise.race()を使用したマルチチャネルチケット取得のシナリオに戻ると、1 つのチャネルがチケットの取得に成功するか、すべてのチャネルが失敗することを保証する必要がある場合は、 Promise.any()を使用する方が適切です。

関数 getTicket() {
  プロミス.any([
  新しいPromise(postASell)、
  新しいPromise(postBSell)、
  新しい Promise(postCSell)
])  
    .then(関数(データ){
     // 1 つのチケットが正常に取得されました})
    .catch(関数(err){
    // .... すべてのチャネルが失敗しました });
};

チケットを取得します。

3.8 Promise.resolve()

Promise.resolve()メソッドは、既存のオブジェクトをPromiseオブジェクトに変換します。次のコードと同等です。

新しいPromise(resolve =>resolv(1))

渡されたパラメータが異なります。

パラメータPromiseインスタンスは変更されずにそのまま返されます。
パラメーターはthenableオブジェクトであり、このオブジェクトをPromiseオブジェクトに変換し、その後すぐにthenableオブジェクトのthen()メソッドを実行します。

thenable = {
  次に: 関数(解決、拒否) {
    解決する(1);
  }
};

パラメータは通常の値であり、 resolvedステータスを持つ新しいPromiseオブジェクトが返されます。

定数promise = Promise.resolve(1);

promise.then(関数 (値) {
  console.log(値) // 1
});

パラメータなし。 resolved状態のPromiseオブジェクトを直接返します。

3.9 Promise.reject()

Promise.reject(reason)メソッドも、 rejectedステータスを持つ新しいPromiseインスタンスを返します。

const promise = Promise.reject('不明なエラー');
// 同等の const promise = new Promise((resolve, reject) => deny('unkonw error'))

promise.then(null, 関数(s) {
  コンソール.log(複数)
});
//不明なエラー

4. シンプルなシーン

画像を非同期で読み込みます:

関数loadImageAsync(url) {
  新しいPromise(function(resolve,reject)を返す{
   定数image = 新しいImage();
    イメージをロードします。
    image.onerror = 拒否;
    イメージのURLをコピーします。
  });
}

リクエストタイムアウト処理:

//リクエスト関数 request(){
    新しいPromise(function(resolve,reject){を返す
       // コード....
         解決('リクエストOK')
    })
}

関数timeoutHandle(time){
   新しいPromise(function(resolve,reject){を返す
        setTimeout(関数(){
            拒否('タイムアウト');
        }、 時間）;
    });
}

Promise.race([
    リクエスト（）、
    タイムアウトハンドル(5000)
])
.then(res=>{
    コンソール.log(res)
}).catch(エラー=>{
    console.log(err) // タイムアウト
})

フロントエンドのJavaScript Promiseに関する記事はこれで終わりです。JavaScript JavaScript Promiseに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: