कॉल बैक नरक का मतलब है कि आप एक कॉलबैक के अंदर कॉलबैक के अंदर हैं और यह एनएचटी कॉल तक जाता है जब तक कि आपकी ज़रूरत पूरी न हो जाए।
आइए, सेट टाइमआउट एपीआई का उपयोग करके नकली अजाक्स कॉल के एक उदाहरण के माध्यम से समझते हैं, मान लें कि हमारे पास एक नुस्खा एपीआई है, हमें सभी नुस्खा डाउनलोड करने की आवश्यकता है।
<body>
<script>
function getRecipe(){
setTimeout(()=>{
const recipeId = [83938, 73838, 7638];
console.log(recipeId);
}, 1500);
}
getRecipe();
</script>
</body>
1.5 सेकंड के बाद के उपरोक्त उदाहरण में जब टाइमर कॉल बैक के कोड के अंदर समाप्त हो जाएगा, तो दूसरे शब्दों में, हमारे नकली ajax कॉल के माध्यम से सभी नुस्खा सर्वर से डाउनलोड हो जाएगा। अब हमें एक विशेष नुस्खा डेटा डाउनलोड करने की आवश्यकता है।
<body>
<script>
function getRecipe(){
setTimeout(()=>{
const recipeId = [83938, 73838, 7638];
console.log(recipeId);
setTimeout(id=>{
const recipe = {title:'Fresh Apple Juice', publisher:'Suru'};
console.log(`${id}: ${recipe.title}`);
}, 1500, recipeId[2])
}, 1500);
}
getRecipe();
</script>
</body>
किसी विशेष रेसिपी डेटा को डाउनलोड करने के लिए हमने अपनी पहली कॉलबैक और उत्तीर्ण रेसिपी आईडी के अंदर कोड लिखा।
अब हम कहते हैं कि हमें उसी प्रकाशक के सभी व्यंजनों को डाउनलोड करने की आवश्यकता है जो आईडी 7638 है।
<body>
<script>
function getRecipe(){
setTimeout(()=>{
const recipeId = [83938, 73838, 7638];
console.log(recipeId);
setTimeout(id=>{
const recipe = {title:'Fresh Apple Juice', publisher:'Suru'};
console.log(`${id}: ${recipe.title}`);
setTimeout(publisher=>{
const recipe2 = {title:'Fresh Apple Pie', publisher:'Suru'};
console.log(recipe2);
}, 1500, recipe.publisher);
}, 1500, recipeId[2])
}, 1500);
}
getRecipe();
</script>
</body>
हमारी आवश्यकताओं को पूरा करने के लिए जो प्रकाशक नाम सुरू के सभी व्यंजनों को डाउनलोड करना है, हमने अपने दूसरे कॉल बैक के अंदर कोड लिखा। यह स्पष्ट है कि हमने एक कॉलबैक श्रृंखला लिखी है जिसे कॉलबैक नरक कहा जाता है।
यदि आप कॉलबैक नरक से बचना चाहते हैं, तो आप प्रोमिस का उपयोग कर सकते हैं, जो कि js es6 सुविधा है, प्रत्येक वादा कॉलबैक लेता है जिसे वादा पूरा होने पर कॉल किया जाता है। वादा कॉलबैक में दो विकल्प हैं या तो इसे हल किया जाए या अस्वीकार किया जाए। मान लीजिए कि आपका एपीआई कॉल सफल है, तो आप कॉल को हल कर सकते हैं और डेटा को रिज़ॉल्यूशन के माध्यम से पास कर सकते हैं, आप तब () का उपयोग करके यह डेटा प्राप्त कर सकते हैं । लेकिन अपने एपीआई का उपयोग कर सकते अस्वीकार विफल होने पर, उपयोग पकड़ त्रुटि को पकड़ने के लिए। एक वादा याद रखें हमेशा उपयोग तो संकल्प और के लिए पकड़ के लिए अस्वीकार
चलो एक वादे का उपयोग करके पिछली कॉलबैक नरक समस्या को हल करें।
<body>
<script>
const getIds = new Promise((resolve, reject)=>{
setTimeout(()=>{
const downloadSuccessfull = true;
const recipeId = [83938, 73838, 7638];
if(downloadSuccessfull){
resolve(recipeId);
}else{
reject('download failed 404');
}
}, 1500);
});
getIds.then(IDs=>{
console.log(IDs);
}).catch(error=>{
console.log(error);
});
</script>
</body>
अब विशेष नुस्खा डाउनलोड करें:
<body>
<script>
const getIds = new Promise((resolve, reject)=>{
setTimeout(()=>{
const downloadSuccessfull = true;
const recipeId = [83938, 73838, 7638];
if(downloadSuccessfull){
resolve(recipeId);
}else{
reject('download failed 404');
}
}, 1500);
});
const getRecipe = recID => {
return new Promise((resolve, reject)=>{
setTimeout(id => {
const downloadSuccessfull = true;
if (downloadSuccessfull){
const recipe = {title:'Fresh Apple Juice', publisher:'Suru'};
resolve(`${id}: ${recipe.title}`);
}else{
reject(`${id}: recipe download failed 404`);
}
}, 1500, recID)
})
}
getIds.then(IDs=>{
console.log(IDs);
return getRecipe(IDs[2]);
}).
then(recipe =>{
console.log(recipe);
})
.catch(error=>{
console.log(error);
});
</script>
</body>
अब हम getRecipe की तरह एक और मेथड कॉल allRecipeOfAPublisher लिख सकते हैं जो एक वादा भी लौटाएगा, और हम allRecipeOfAPublisher के लिए संकल्प वादे को प्राप्त करने के लिए एक और () लिख सकते हैं, मुझे उम्मीद है कि इस बिंदु पर आप इसे खुद से कर सकते हैं।
तो हमने सीखा कि वादों का निर्माण और उपभोग कैसे किया जाता है, अब आइए हम एस 8 / एसिट का उपयोग करके एक वादे को आसान बनाते हैं जो एस 8 में पेश किया गया है।
<body>
<script>
const getIds = new Promise((resolve, reject)=>{
setTimeout(()=>{
const downloadSuccessfull = true;
const recipeId = [83938, 73838, 7638];
if(downloadSuccessfull){
resolve(recipeId);
}else{
reject('download failed 404');
}
}, 1500);
});
const getRecipe = recID => {
return new Promise((resolve, reject)=>{
setTimeout(id => {
const downloadSuccessfull = true;
if (downloadSuccessfull){
const recipe = {title:'Fresh Apple Juice', publisher:'Suru'};
resolve(`${id}: ${recipe.title}`);
}else{
reject(`${id}: recipe download failed 404`);
}
}, 1500, recID)
})
}
async function getRecipesAw(){
const IDs = await getIds;
console.log(IDs);
const recipe = await getRecipe(IDs[2]);
console.log(recipe);
}
getRecipesAw();
</script>
</body>
उपरोक्त उदाहरण में, हम, क्योंकि यह पृष्ठभूमि में चलेगा एक async फ़ंक्शन का उपयोग किया, async समारोह के अंदर हम इस्तेमाल किया इंतजार प्रत्येक विधि है जो रिटर्न या एक वादा क्योंकि में दूसरे शब्दों में, जब तक कि वादा निभाया कि स्थिति पर प्रतीक्षा करने के लिए है से पहले कीवर्ड bellow कोड्स जब तक getIds हल नहीं हो जाते हैं या प्रोग्राम को अस्वीकार नहीं करते हैं, तब तक उस लाइन के कोड को bellow निष्पादित करना बंद कर देगा जब IDs वापस आ जाता है, तो हम फिर से एक आईडी के साथ getRecipe () फ़ंक्शन को कॉल करते हैं और जब तक डेटा वापस नहीं आता तब तक वेट कीवर्ड का उपयोग करके इंतजार किया जाता है। तो यह है कि आखिरकार हम कॉलबैक नरक से कैसे बरामद हुए।
async function getRecipesAw(){
const IDs = await getIds;
console.log(IDs);
const recipe = await getRecipe(IDs[2]);
console.log(recipe);
}
प्रतीक्षा का उपयोग करने के लिए हमें एक async फ़ंक्शन की आवश्यकता होगी, हम एक वादा वापस कर सकते हैं, इसलिए उपयोग का वादा करें और वादे को अस्वीकार करने के लिए कैथ का उपयोग करें
उपरोक्त उदाहरण से:
async function getRecipesAw(){
const IDs = await getIds;
const recipe = await getRecipe(IDs[2]);
return recipe;
}
getRecipesAw().then(result=>{
console.log(result);
}).catch(error=>{
console.log(error);
});
