promiseについてお話しし、多層コールバックのネストを優雅に避ける方法について議論します.

2504 ワード

javascriptはブロックできないことを知っています.すべての待機はコールバックでしかできません.これは、コールバックがネストされている問題をもたらし、コードが爆発します.
一般的な例として、ローカルクッキーのuidを介してサーバAからkeyを取得し、サーバBからtokenを取得し、最終的にこのtokenをサーバCに取得してユーザの情報を取得する検証問題がある.
ここにはapiインタフェースが3つあります.それぞれ
//  key  
var apiKey= 'http://a.api.example.com/getkey?uid={uid}'
//  token
var apiToken = 'http://b.api.example.com/gettoken?key={key}'
//      
var apiUserInfo = 'http://a.api.example.com/getuserinfo?token={token}&uid={uid}'

var uid = 1;
//        
$.getJSON(apiKey,{
    'uid':uid
},function(data) {
    $.getJSON(apiToken,{
        'key':data.key
    },function(data){
        $.getJSON(apiUserInfo,{
            'token':data.token,
            'uid':uid
        },function(user) {
            alert(user.name)
        })
    })
});

このコードは一层にまったく见えなくて、まったく意味の効果がなくて、后期にメンテナンスして头が大きいです
このようにコードを書けるとしたら
$.getJSON(apiKey,{
    'uid':uid
}).then(function(data){
    return $.getJSON(apiToken,{
        'key':data.key
    });
}).then(function(data){
    return $.getJSON(apiUserInfo,{
        'token':data.token,
        'uid':uid
    })
}).then(function(user) {
    alert(user.name)
})

一歩一歩下がって、調理がとてもはっきりしています
だから私たちはコードを持ってこの書き方を支持しなければなりません.もちろん、大神が書いたので、次は見てみましょう.
new Promise(function(resolve,reject){
    $.getJSON(apiKey,{
        'uid':uid
    },function(data) {
        resolve(data);
    },function(err){
        reject(err);
    })
}).then(function(data) {
    new Promise(function(resolve,reject) {
        $.getJSON(apiToken,{
            'key':data.key
        },function(data){
            resolve(data)
        })
    })
}).then(xxxxx)

悪くないですね.後でコールバック付きの関数を書けば、new Promiseでいいです.
もちろん、jQueryは自分のやり方を実現しました.doneしかし、これはもうみんなに捨てられました.
でもこれはpromiseのルールに合わないので、捨てます.
プロフェッショナルなpromiseはjQueryにソリューションを提供しました
例えばこれ
https://www.promisejs.org/
ここには実現がありますが、やはりいいですね.githubの注目が一番多いです.
彼はjQueryにソリューションを提供しました

Promise.resolve($.getJSON(apiKey,{
    'uid':uid
})).then(function(data) {
    return Promise.resolve($.getJSON(apiToken,{
        'key':data.key
    }))
}).then(function(data) {
    return Promise.resolve($.getJSON(apiUserInfo,{
        'token':data.token,
        'uid':uid
    }));
}).then(function(user) {
    alert(user.name);
});

もっと爽やかになった
新しいスキル、みんな急いでgetしましょう