ES 6 Promiseオブジェクト解決非同期フィードバック

記事の目次
ES 6のPromiseに関する文章はネット上に多すぎます.英語の意味:承諾、承諾.Promiseオブジェクトは、Promiseのインスタンスを生成するために構成関数である.Promiseコンストラクタは、それぞれresolveおよびrejectである関数をパラメータとして受け入れる.それらは2つの関数で、JavaScriptエンジンによって提供されます.自分で配置する必要はありません.Promiseのインスタンスが生成された後、then方法でResolved状態およびReject状態のコールバック関数をそれぞれ指定することができる.
Promiseとは
Promiseは最初にコミュニティから提出して実現しました.典型的ないくつかの倉庫はQがあります.when、 ブルーバードなどそれらの出現はJavaScriptの中の非同期プログラミングの問題をよりよく解決するためで、伝統的な非同期プログラミングの最大の特徴は地獄のようなエコーネストであり、入れ子の回数が多すぎると、コードの理解と維持が容易になります.Promiseはチェーン式で呼び出された方法でレプリカネストの問題を解決できます.コードをより理解しやすく、維持しやすくします.また、Promiseは多くの有用な特性を追加しました.
どうやってPromiseを作成しますか
ES 6はオリジナルのコンストラクターPromiseを提供してくれます.このコンストラクタを見てもいいです.

//                     （Chrome   ）
> typeof Promise
"function" //             
> Promise
function Promise() { [native code] } // ES6     

まずプロモーションを作成します.以下は簡単な例です.

//      ES5   
var promise = new Promise(function(resolve, reject) {
    var flag = Math.random();
    setTimeout(function() {
        if(flag) {
            resolve('success');
        }
        else {
            reject('fail');
        }
    }, 1000);
});

console.log(promise); //             ，               Promise  ； Node.js         Promise {  }。

promise.then(function(result) {
    console.log(result);
}, function(err) {
    console.log(err);
}); // 1s         fail    success

上のコードを説明します.
Promiseはコンストラクタなので、newオペレータを使ってプロミスを作成しました.構造関数Promiseのパラメータは関数です.この関数は2つのパラメータresoveとrejectがあります.それぞれ2つの関数です.この2つの関数はpromiseの状態をpending(待つ)からreolved(解決済み)に変換したり、pending(待つ)からrejectに変換したりする役割があります.作成後のプロミスにはいくつかの方法があります.thenとcatch.もちろん私達も人工的にPromise関数に私達の自分の需要を満たす方法を追加して、各promiseオブジェクトに使いやすいです.ES 6の文法を使えば、上のコードはもっと簡潔になります.

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        Math.random() > 0.5 ? resolve('success') : reject('fail');
    }, 1000)
});

console.log(p);

p.then((result) => {
    console.log(result);
}, (err) => {
    console.log(err);
});

Promise関数体の内部には、非同期の要求または操作または関数が包まれていることが理解できる.そして、この非同期の操作が完了したとき、私たちが得られた結果をreject関数を使って伝達することができます.
Promiseオブジェクトのいくつかの方法
Promiseオブジェクトは、then法を用いて前のステップに戻った結果を取得することができ、catch法を用いてPromiseオブジェクトのcatchを使用する前の異常を捕捉することができる.
まず、thenメソッドの使用を説明します.

let p = new Promise((resolve, reject) => {
   let flag = Math.random() > 0.5 ? true : false;
   if(flag) {
       console.log('  resolve promise   pending  resolved');
       resolve('success');
   }
   else {
       console.log('  reject promise   pending  rejected');
       reject('fail');
   }
});

// @1
p.then((result) => {
    console.log('  resolved   ');
    console.log(result);
}, (err) => {
    console.log('       ');
    console.log(err);
});

then法はパラメータとして2つの関数を受け入れることができ,最初の関数はrejectの結果を処理するために用いられ,2番目は任意であることを示した.つまり、pというPromiseオブジェクトを作成する際に、関数resoveを通して伝達された結果をpの最初のthen法の最初の関数によって捕獲し、そのパラメータとして使用することができます.関数rejectによって伝達された結果はpの最初のthen法における第二の関数によって捕獲され,その後そのパラメータとして作用することができる.
もちろん、各thenメソッドに新たなPromiseを作成して、このPromiseオブジェクトを返してもいいです.その後、このオブジェクトを操作し続けてもいいです.以下は簡単な例です.

let p1 = new Promise((resolve, reject) => {
    let flag = Math.random() > 0.5 ? true : false;
    resolve();
});
// @2   then         
p1.then(() => {
    return 1;
}).then((result) => {
    console.log(result);
    return 'hello'
}).then((result) => {
    console.log(result);
});

// @3  then               
p1.then(() => {
    console.log('******');
    let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(123);
        }, 1000);
    });
    return p1;
}).then((result) => {
    console.log(result);
});

上のコードから私達はPromiseオブジェクトを作成したら、thenメソッドを使ってチェーンの呼び出しができます.そして、毎回の結果を次のthen方法に戻して、次のthen方法でこの値を処理することができます.各thenメソッドは、新たにPromiseオブジェクトを作成し、次のthenメソッドに戻して処理することができます.
Promiseにはもう一つの方法のcatchがあります.この方法は実はthen方法の特例です.

.then(null, rejection)

then法を用いない最初の関数に相当します.第二の関数だけを使います.catch関数は簡単で、捕獲前のthenメソッドの異常を簡単に見ることができます.

let p = new Promise((resolve, reject) => {
    resolve();
});
p.then(() => {
    console.log('progress...');
}).then(() => {
    throw new Error('fail');
}).catch((err) => {
    console.log(err);
});

上のコードの出力結果は以下の通りです.

progress...
VM141:9 Error: fail(…)

catch関数を用いて,then関数チェーン全体の異常を捕獲できる.
Promiseのいくつかの方法
Promise.all方法は多くのPromiseの例を包装して、新しいPromiseオブジェクトを構成しています.新しいPromiseオブジェクトの状態は前のいくつかのPromiseオブジェクトの状態によって決まります.もし前のPromiseが全部resoveされたら、新しいPromiseの状態もresoveです.Promiseが一つある限り、rejectされて、構成される新しいPromiseの状態もrejectです.
次の例を見てもいいです.

let arr = [1, 2, 3].map(
    (value) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(value);
            }, value * 1000);
        });
    }
);

console.log(arr);

let promises = Promise.all(arr)
.then((result) => {
    console.log(result);
}).catch((err) => {
    console.log(err);
});

上のコードの出力結果は以下の通りです.

[ Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> } ]
[ 1, 2, 3 ] // 3s      

Promise.race方法は上のPromise.allと似ています.多くのPromiseオブジェクトを包装して、新しいPromiseオブジェクトを作っていますが、Promise.raceを使うという意味は、小包のPromiseオブジェクトの中に一つの状態が変化したら、では、この新たなPromiseオブジェクトの状態は、上の先に変わったPromiseの例の状態です.
以下は簡単な例です.

let arr = [1, 2, 3].map(
    (value) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(value);
            }, value * 1000);
        });
    }
);

console.log(arr);

let promises = Promise.race(arr)
    .then((result) => {
        console.log(result);
    }).catch((err) => {
        console.log(err);
    });

上のプログラムの出力結果は以下の通りです.

[ Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> } ]
1 //           Promise  resolve  

Promise.resove方法は主に一つの値をPromiseオブジェクトに変換してPromiseのいくつかの方法と特性を持たせて、私達のいくつかの特殊な情況の下の要求を満たすためです.
以下は簡単な例です.

let arr = [null, 0, 'hello',
    { then: function() { console.log(' a thenable obj')}}
];

arr.map((value) => {
        return Promise.resolve(value);
    });

console.log(arr);

上記の出力結果は以下の通りです.

[ null, 0, 'hello', { then: [Function: then] } ]
 a thenable obj // Promise.resolve      then          Promise  ，       then  。

Promise.reject方法はPromise.reolve方法と同じですが、Promise.reject方法により作成されたPromiseオブジェクトの状態はrejectであり、以下の例があります.

let p = Promise.reject('fail');
p.catch((err) => {
    console.log(err);
}); // fail

上の内容はES 6に新たに追加されたPromiseの基本的な使い方を教えてくれました.はい、ここに来てください.
作者:dreamapplehappyリンク:https://zhuanlan.zhihu.com/p/23907711出所:著作権は著者の所有になります.商業転載は作者に連絡して授権を獲得してください.商業転載ではないので、出典を明記してください.