ホームページ  >  記事  >  ウェブフロントエンド  >  jsのpromiseに関する知識ポイントを詳しく紹介

jsのpromiseに関する知識ポイントを詳しく紹介

亚连
亚连オリジナル
2018-06-08 10:57:491399ブラウズ

ここで、js Promise の使用について簡単に説明します。非常に優れた参考値となっており、この記事を読めば理解できると思います。お役に立てれば幸いです。

1. 背景

nodejs が非常に速いことは誰もが知っていますが、なぜそんなに速いのでしょうか?その理由は、コードが待機する必要があるイベントを処理するために非同期コールバックを使用するためです。特定のイベントを待たずに実行できます。ただし、欠点もあります。たとえば、このコールバックを実行した後、次のコールバックを実行する必要があるため、階層がネストされてわかりにくくなります。 . 「コールバック刑務所」に入るのは簡単で、次のような例につながります。書き込み?答えは「はい」です。es6 の新しい Promise オブジェクトと es7 の async await でこの問題を解決できます。もちろん、Promise オブジェクトについては最初に紹介し、es7 の async await については次の記事で説明します。 Promise オブジェクトについては以下で紹介します。

2. はじめに

Promise は、非同期操作をよりエレガントに、より美しく、読みやすく記述するために使用されるオブジェクトです。名前の通り約束という意味で、Promiseを使用した後は必ず返事をくれる、成功しても失敗しても返事をくれるので逃げ出す心配がない。離れて、ははは。したがって、Promise には保留中 (進行中)、解決済み (完了)、および拒否 (失敗) の 3 つの状態があります。非同期的に返された構造のみがその状態を変更できます。したがって、通常、Promise プロセスは保留中→解決、または保留中→拒否の 2 つだけです。

Promise オブジェクトには、コールバック関数を実行するために使用される、より一般的に使用される then メソッドもあります。1 つは成功した解決されたコールバック、もう 1 つは失敗した拒否されたコールバックです。コールバックパラメータはオプションです。また、then メソッドは、Promise オブジェクトを返すこともできるため、チェーン内で呼び出すことができます。次に、コード:

async(1, function(value){
 async(value, function(value){
 async(value, function(value){
  async(value, function(value){
  async(value, function(value){
   async(value, final);
  });
  });
 });
 });
});

上記のコードでは、Pro 変数が定義され、それに匿名関数が割り当てられ、関数は Promise オブジェクトを返し、オブジェクト内の関数を受け取り、resolve と を渡します。メソッドをそれぞれパラメータとして拒否し、setTimeOut を使用して非同期リクエストをシミュレートすると、resolve メソッドの関数が呼び出されます。結果は以下の通りです:

3. Promise api

1、Promise.resolve()2、Promise.reject()

3、Promise.prototype.then()

4、Promise .prototype .catch()
5, Promise.all() // 全て完了、
6、Promise.race() // 1つだけ完了可能、

1、Promiseと同等。 solve() この関数は、既存のオブジェクトを Promise オブジェクトに変換することです。resolvel;Promise.resolve('test')==new Promise(resolve=>resolve('test'))

2.また、 Promise オブジェクトを返す場合、ステータスは拒否されます

3. then メソッドは上で紹介されているため、ここでは紹介しません。

4. catch(): エラー発生時のコールバック関数。

5. Promise.all() は、すべての結果が完了した後にのみ then() の操作が成功する場合に適しています。例:

var Pro = function (time) {
   //返回一个Promise对象
   return new Promise(function (resolve, reject) {
    console.log('123');
    //模拟接口调用
    setTimeout(function () {
     //这里告诉Promise 成功了,然后去执行then方法的第一个函数
     resolve('成功返回');
    }, time);
   })
  };
  (function(){
   console.log('start');
   Pro(3000)
   .then(function(data){
    console.log(data);
    return Pro(5000);})
   .then(function(data){
    console.log(data);
    console.log('end');
   })
  })();

最終出力:

6. Promise.race() の機能は、1 つのインスタンスが状態を変更する限り、Promise は に変更されます。

4. 例

let p1 =new Promise(function(resolve,reject){
   resolve(1);
  });
  let p2 = new Promise(function(resolve,reject){
   resolve(2);
  });
  let p3 = new Promise(function(resolve,reject){
   resolve(3);
  });
  Promise.all([p1, p2, p3]).then(function (results) {
   console.log('success:'+results);
  }).catch(function(r){
   console.log("error");
   console.log(r);
  });
出力:

このように、then メソッドを使用してチェーン呼び出しを実装できます。

上記は私があなたのためにまとめたものです。

関連記事:

JavaScript Mediator パターン (詳細なチュートリアル)

jQuery で Dom 要素を使用する方法?

Vueでイベント応答型プログレスバーコンポーネントを実装する方法

以上がjsのpromiseに関する知識ポイントを詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。