PROMISEに基づいてコールバック地獄問題を解決する
3404 ワード
地獄問題のコールバック:
JavaScriptを使用する場合、いくつかの論理を実現するためにネストされたコールバック関数が頻繁に書かれ、ネストが多すぎるとコードの可読性と論理に大きく影響し、このような状況もコールバック地獄となっている.たとえば、1つの関数Aをコールバック関数として使用しますが、この関数はまた1つの関数Bをパラメータとして受け入れ、さらにBはCをパラメータとして使用することも受け入れます.このようにネストされ、コールバック地獄と呼ばれ、コードの読解性が非常に悪いです.
たとえば、3つの非同期のリクエストを送信するには、前のリクエストが完了してから、リクエストを順次送信する必要があります.
PROMISEベースの解決
Promise:ES 6に追加された組み込みクラスは、非同期操作を管理するためです.
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);
});