PROMISEに基づいてコールバック地獄問題を解決する

3404 ワード

地獄問題のコールバック:
JavaScriptを使用する場合、いくつかの論理を実現するためにネストされたコールバック関数が頻繁に書かれ、ネストが多すぎるとコードの可読性と論理に大きく影響し、このような状況もコールバック地獄となっている.たとえば、1つの関数Aをコールバック関数として使用しますが、この関数はまた1つの関数Bをパラメータとして受け入れ、さらにBはCをパラメータとして使用することも受け入れます.このようにネストされ、コールバック地獄と呼ばれ、コードの読解性が非常に悪いです.
たとえば、3つの非同期のリクエストを送信するには、前のリクエストが完了してから、リクエストを順次送信する必要があります.
$.ajax{
    url:'url1',
    success:result=>{
        $.ajax{
            url:'url2',
            success:result=>{
                $.ajax{
                    url:'url3',
                    success:result=>{
                        
                    }
                };
            }
        };
    }
};//       

PROMISEベースの解決
Promise:ES 6に追加された組み込みクラスは、非同期操作を管理するためです.
//       
let queryA = function(){
    return new Promise(resolve=>{
        $.ajax({
            url:'url1',
            success:resolve,
        });
    }); 
}
let queryB = function(){
    return new Promise(resolve=>{
        $.ajax({
            url:'url2',
            success:resolve,
        });
    }); 
}
let queryC = function(){
    return new Promise(resolve=>{
        $.ajax({
            url:'url3',
            success:resolve,
        });
    }); 
}
//  queryA       promise,    then      Prmise  
let promise = queryA();
promise.then(result=>{
    console.log(1);
    return queryB();// queryB                    then
}).then(result=>{
    console.log(2);
    return queryC();
}).then(result=>{
    console.log(3);
});