☰

プロミスは単なるコールバックではないのですか? 質問する

tag-icon • tag-icon javascript callback promise q bluebird
プロミスは単なるコールバックではないのですか? 質問する

私は数年間 JavaScript を開発してきましたが、Promise に関する騒ぎが全く理解できません。

私がやっていることは変化することばかりのようです:

api(function(result){
    api2(function(result2){
        api3(function(result3){
             // do work
        });
    });
});

次のようなライブラリを使用できます非同期とにかく、次のようなものです:

api().then(function(result){
     api2().then(function(result2){
          api3().then(function(result3){
               // do work
          });
     });
});

コードが増えて読みにくくなります。ここでは何も得られませんでした。突然魔法のように「フラット」になるわけでもありません。言うまでもなく、Promise に変換する必要があります。

それで、ここで約束について大騒ぎするのはなぜでしょうか?

ベストアンサー1

Promise はコールバックではありません。Promise は、非同期操作の将来の結果を表します。もちろん、あなたが行っているように記述しても、メリットはほとんどありません。しかし、意図された使用方法で記述すれば、同期コードに似た方法で非同期コードを記述でき、はるかに簡単に理解できます。

api().then(function(result){
    return api2();
}).then(function(result2){
    return api3();
}).then(function(result3){
     // do work
});

確かに、コードはそれほど減りませんが、読みやすくなります。

しかし、これで終わりではありません。本当のメリットを見てみましょう。いずれかのステップでエラーをチェックしたい場合はどうすればよいでしょうか。コールバックでこれを行うのは大変ですが、Promise を使えば簡単です。

api().then(function(result){
    return api2();
}).then(function(result2){
    return api3();
}).then(function(result3){
     // do work
}).catch(function(error) {
     //handle any error that may occur before this point
});

ブロックとほぼ同じですtry { ... } catch。

さらに良い点:

api().then(function(result){
    return api2();
}).then(function(result2){
    return api3();
}).then(function(result3){
     // do work
}).catch(function(error) {
     //handle any error that may occur before this point
}).then(function() {
     //do something whether there was an error or not
     //like hiding an spinner if you were performing an AJAX request.
});

さらに良いのは、 、 の 3 つの呼び出しが同時に実行できる (たとえば、AJAX 呼び出しの場合) が、3 つを待つ必要がある場合はどうなるでしょうapiかapi2。Promiseapi3がなければ、何らかのカウンターを作成する必要があります。Promise を使用すると、ES6 表記法を使用して、これも簡単で非常に便利です。

Promise.all([api(), api2(), api3()]).then(function(result) {
    //do work. result is an array contains the values of the three fulfilled promises.
}).catch(function(error) {
    //handle the error. At least one of the promises rejected.
});

これからは Promises を新たな視点で見てもらえれば幸いです。

おすすめ記事