Promiseの紹介と基本使用

目次
1、Promiseとは何ですか?
2、なぜPromiseを使うのですか?
3、Promise の基本的な使用
4、Promiseの3つの状態
5、Promiseのチェーン呼び出し
6、Promise.all方法の使用
7、Promise.race メソッドの使用
1、Promiseとは何ですか?
PromiseはES 6の中で非常に重要であり、和やかで使いやすい特性であり、先端非同期プログラミングの解決策である.よくあるPromiseの使用シーンは、例えば、ネットワークリクエストを送信する時です. JavaScriptコードは実行中にネットワーク要求を送信します.ネットワーク要求を同期して送信すると、JavaScriptコードはネットワーク要求の結果が戻る前に待機状態になり、次の実行を継続しません.この問題に対して、非同期でネットワーク要求を送信しながら、ネットワーク要求を送信する必要があります.次にJavaScriptコードを実行しながら、要求されたデータが戻ったら、その対応するコールバック関数を実行すればいいです.
Promiseは先端が発明したのではなく、後端を参考にしたのです.1976年、Daniel P.FriendmanとDavid Wiseの二人はPromise思想を提出しました.後代の人はこれに基づいてFuture、Delay、Deferredなどを発明しました.先端はPromiseとJSを結合して、Promise/A+規範を制定しました.これは解析があります Promise/Promise/A+仕様を詳しく説明します.
勉強したいなら、使います. Promiseは、原理を知った上で、次の言葉をよく覚えておいたほうがいいです.
2、なぜPromiseを使うのですか?
ここで誇張した例を挙げると分かりやすいです.有名な回調地獄です.
もし私たちはurl 1を通じてサーバーからデータをロードする必要があるなら、data 1 には次の請求が含まれています. url 2,
そして私たちは通過しなければならない. ダタ1 urlを取り出す ,サーバーからデータをロードします. には次の要請が含まれています. ,
そして私たちは通過しなければならない. ダタ2 url 3を取り出して、サーバーからデータdata 3をロードします.data 3 には次の要請が含まれています. ,
そしてネットワーク要求url 4を送ります. ,最終データを取得する.上記の例に対応します. jQuery-Ajax コードは以下の通りです

$.ajax('url1',function(data1){    //  data1  url2
    $.ajax('url2',function(data2){    //  data2  url3
        $.ajax('url3',function(data3){    //  data3  url4
            $.ajax('url4',function(data4){    //  data3  url4
                console.log(data4);    //       data4
            })
        })
    })
})

上記のコードは正常に運行してほしい結果を得ることができますが、このようなコードフォーマットは醜くて維持しにくいです.Promiseはこの問題に対して、より優雅な方法で非同期操作を行うことができます.
3、Promise の基本的な使用
ここでsetTimeout法を用いて非同期動作をシミュレートすると、Promise法には一つの関数が必要であり、この関数を実行すると二つのパラメータが入ってきます.この二つのパラメータも関数タイプです.Promiseメソッドにおける関数の関数を格納するためには、送信される非同期要求が必要であり、最終的な処理コードは.thenに置かれる. 和.catch方法中です.非同期操作が成功すれば、レスリング関数を呼び出します.一旦レスリングを呼び出します. 関数は呼び出します.then関数は非同期操作で実行に失敗したらrejectを呼び出します. 関数を使って、一旦呼び出したらreject 関数が呼び出されます.catch関数は、このように非同期要求と実行したい操作を分離し、コードをより明確にし、後期のメンテナンスにも便利です.

new Promise((resolve,reject) => {
	setTimeout(() => {
		//       resolve
		resolve('you are so bangbang')
		
		//       reject
		reject('what is your problem,laodi')
	},1000)
}).then((data) => {
	console.log(data);
}).catch((err) => {
	console.log(err);
})

4、Promiseの3つの状態
開発中に非同期操作があれば、非同期操作にPromiseを一つ包装することができます.非同期操作後は三つの状態があります.
pending:待ち状態、例えばネットワーク要求を行っています.またはタイマーが時間にならないです.
fulfill:完成状態で、私達が自発的にレレスをした時、この状態にあります.そして、レプリカします. .then() 方法
reject:拒否状態で、rejectを自主的にリプライした時、この状態になります. .catch()方法
一つのPromiseの状態は待つ状態から完成状態または拒否状態にしか変換できません.逆変換できません.同時に完了状態と拒否状態は互いに変換できません.Promiseはthen方法を実装しなければならず、またthenはPromiseオブジェクトを返しています.同じPromiseのthenは何度もコールできます.また、コールバックの実行順序はそれらが定義されている時の順序と一致しています.もう一つは失敗時のコールバックで、Promiseがスタンバイ状態から拒否状態に移行した時に呼び出します.また、thenは、もう一つのPromiseの導入を受け入れることができる.上記のコードは以下の通りです.

new Promise((resolve, reject)=>{
	setTimeout(function(){
		//       resolve
		resolve('you are so bangbang')
		//       reject
		reject('what is your problem,laodi')
	},1000)
}). then(data=>{
	console. log(data);
}, error=>{
	console. log(error);
}

Promiseの状態については、2点を覚えます.
(1)一つのpromiseの現在の状態は、pending、fulfilledとrejectiedの三種類の一つしかない.状態が変わるのはpenaingからfufilledまたはpendingからrejectiedまでだけです.状態変化は可逆ではない.
(2)promiseのthen方法は二つのオプションパラメータを受信し、このpromise状態が変化した時のフィードバックを表します.then方法はpromiseを返します.then方法は同じpromiseに何度も呼び出されます.
5、Promiseのチェーン呼び出し
Promise.then()は新しいPromiseの例を返します.したがって、チェーン式の書き方、すなわち、then()方法の後に別のthen()方法を呼び出すことができる.例えば、2回目のネットワーク要求を送信する場合、1回目の要求が終了したら、then()メソッド体に新たなPromiseオブジェクトを作成し、2回目のネットワーク要求を実行すれば、最初のthen()メソッドの後に直接にthen()方法を書くことができ、2回の要求が全部終了したら、後のthen()方法を実行することができます.

new Promise((resolve,reject) => {
	//          
	setTimeout(() => {
		//       resolve
		resolve('helloWorld111')
	},1000)
}).then((data) => {
	//            
	console.log(data);
	
	return new Promise((resolve,reject) => {
		//          
		setTimeout(() => {
			//       resolve
			resolve('helloWorld222')
		},1000)
	})
}).then((data) => {
	//            
	console.log(data);
})

6、Promise.all方法の使用
もし開発工程にある需要が二つ以上の要求に依存していたら、すべての要求結果を得ていないと、関連の操作を下に進めることができません.この時はPromise.all()を使うことができます. 方法では、この方法は、いくつかの要求の配列が入ってくる必要があり、最終的な結果は1つの配列で返され、各要求の結果は、配列下標によって具体的に得られます.

Promise.all([
    new Promise((resolve,reject) => {
        //   ：()
        $ajax({
            url:'url1',
            success:function(data){
                resolve(data)
            }
        })
    }),
    new Promise((resolve,reject) => {
        //   ：
        $ajax({
            url:'url2',
            success:function(data){
                resolve(data)
            }
        })
    }),
]).then(results => {
    result[0]
    result[1]
})

7、Promise.race メソッドの使用Promise.race(iterable) 方法は一つを返します プロミスは、いったんディエ代機の中のあるプロミスが解決したり、拒否したりすると、戻ってきたプロミスが解決されたり、拒否されたりします.

var p1 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 500, "one"); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "two"); 
});

Promise.race([p1, p2]).then(function(value) {
  console.log(value); // "two"
  //      ，  p2   
});

今主流のフレームはaxiosです.Promiseに合わせて使うので、Promiseを知ったら見てみてください. axiosフレームの紹介と基本使用