जावास्क्रिप्ट में प्रॉमिस में अनकॉट एरर को कैसे ठीक करें

त्रुटिअनकहा (वादे में) आपके ब्राउज़र कंसोल में इसका मतलब है कि एक वादा अस्वीकार कर दिया गया था लेकिन अस्वीकृति को कुछ भी नहीं संभाला गया। यह अक्सर एक वास्तविक त्रुटि संदेश के साथ प्रकट होता है और अनचाहे एसिंक विफलताओं को इंगित करता है। यहां प्रत्येक प्रकार को ठीक करने का तरीका बताया गया है।

इस त्रुटि का क्या अर्थ है

जब कोई वादा अस्वीकार (विफल) होता है, तो आपको इसे.catch()से संभालना चाहिए या एक प्रयास/पकड़ (async/प्रतीक्षा के साथ)। यदि आप ऐसा नहीं करते हैं, तो जावास्क्रिप्ट “अनकॉट (वादे में)” की रिपोर्ट करता है – बिना किसी हैंडलर के एक एसिंक त्रुटि उत्पन्न हो गई। सिंक्रोनस त्रुटियों के विपरीत, अनचाहे वादे को अस्वीकार करने से पृष्ठ क्रैश नहीं होता है बल्कि बग का संकेत मिलता है।

कारण 1: प्रॉमिस चेन पर .कैच() गायब

// 🐛 No .catch() — if fetch fails, rejection is unhandled
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));
  // Missing .catch() → "Uncaught (in promise)" if it fails

// ✅ Always add .catch()
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('Fetch failed:', err));

कारण 2: async/प्रतीक्षा बिना प्रयास/पकड़ के

// 🐛 await can reject, and there's no try/catch
async function loadData() {
  const res = await fetch('/api/data');   // rejects if network fails
  const data = await res.json();
  return data;
}
loadData();   // "Uncaught (in promise)" if fetch rejects

// ✅ Wrap in try/catch
async function loadData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error('Load failed:', err);
    return null;
  }
}

कारण 3: किसी एसिंक फ़ंक्शन की अस्वीकृति को संभाले बिना उसे कॉल करना

// 🐛 async function rejects, caller doesn't handle it
async function saveData() {
  throw new Error('Save failed');
}

saveData();   // "Uncaught (in promise): Error: Save failed"

// ✅ Handle at the call site
saveData().catch(err => console.error(err));

// ✅ Or in an async context
async function main() {
  try {
    await saveData();
  } catch (err) {
    console.error(err);
  }
}

कारण 4: एक शृंखला में लौटना/प्रतीक्षा करना भूल जाना

// 🐛 Nested promise not returned — its rejection escapes the chain
function process() {
  return fetch('/api/step1')
    .then(res => {
      fetch('/api/step2');   // ❌ not returned — rejection unhandled
    });
}

// ✅ Return the inner promise so the chain handles it
function process() {
  return fetch('/api/step1')
    .then(res => {
      return fetch('/api/step2');   // returned — chain catches its errors
    })
    .catch(err => console.error(err));
}

कारण 5: एसिंक कॉलबैक वाले इवेंट हैंडलर

// 🐛 async event handler with no error handling
button.addEventListener('click', async () => {
  const data = await fetchData();   // if this rejects, unhandled
  render(data);
});

// ✅ Handle errors inside the async handler
button.addEventListener('click', async () => {
  try {
    const data = await fetchData();
    render(data);
  } catch (err) {
    showError('Could not load data');
    console.error(err);
  }
});

ग्लोबल हैंडलर (सुरक्षा नेट)

// Catch any unhandled rejections globally (last resort, not a fix)
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();   // prevents the default console error
  // Log to your error tracking service
  reportError(event.reason);
});

// In Node.js:
process.on('unhandledRejection', (reason, promise) => {
  console.error('Unhandled Rejection:', reason);
  // In production, log and possibly exit gracefully
});

Promise.all और त्रुटि प्रबंधन

// 🐛 Promise.all rejects if ANY promise rejects — needs a catch
const results = await Promise.all([fetchA(), fetchB(), fetchC()]);
// If fetchB rejects, the whole thing rejects — handle it

// ✅ With try/catch
try {
  const results = await Promise.all([fetchA(), fetchB(), fetchC()]);
} catch (err) {
  console.error('One of the requests failed:', err);
}

// ✅ Or use allSettled to get all results regardless of failures
const results = await Promise.allSettled([fetchA(), fetchB(), fetchC()]);
results.forEach(r => {
  if (r.status === 'fulfilled') use(r.value);
  else console.error('Failed:', r.reason);
});

अक्सर पूछे जाने वाले प्रश्न

प्रश्न: क्या किसी हैंडल न किए गए अस्वीकृति से मेरा ऐप क्रैश हो जाता है?
उ: ब्राउज़र में, नहीं – पेज चलता रहता है, लेकिन आपको कंसोल त्रुटि मिलती है और विफल ऑपरेशन चुपचाप पूरा नहीं होता है। Node.js में, बिना संभाले अस्वीकृतियाँ प्रक्रिया को क्रैश कर सकती हैं (आधुनिक संस्करणों में)। किसी भी तरह से, यह एक बग है जिसे ठीक करना चाहिए, अनदेखा नहीं करना चाहिए।

प्रश्न: मैं .catch() को वास्तव में कहां रखूं?
ए: वादा श्रृंखला के अंत में, इसलिए यह किसी भी पूर्ववर्ती चरण से त्रुटियों को पकड़ता है। एसिंक/प्रतीक्षा के साथ, प्रतीक्षित कॉल को प्रयास/पकड़ में लपेटें। मुख्य बात यह है कि प्रत्येक एसिंक ऑपरेशन में कहीं न कहीं एक हैंडलर होता है।

प्रश्न: क्या वैश्विक अनहैंडलरिजेक्शन हैंडलर एक उचित समाधान है?
उ: नहीं – यह लॉगिंग के लिए एक सुरक्षा जाल है, न कि जहां त्रुटियां होती हैं उन्हें संभालने का विकल्प नहीं। आपसे छूटी हुई किसी भी चीज़ को पकड़ने और रिपोर्ट करने के लिए इसका उपयोग करें, लेकिन वास्तविक अप्रबंधित अस्वीकरणों को उनके स्रोत पर ही ठीक करें।

प्रश्न: यह कभी-कभी काम क्यों करता है लेकिन दूसरों पर नहीं?
उत्तर: अस्वीकृति केवल तभी होती है जब वादा वास्तव में विफल हो जाता है (नेटवर्क त्रुटि, HTTP त्रुटि, थ्रो अपवाद)। यह तब काम करता है जब सब कुछ सफल हो जाता है और त्रुटियां तभी होती हैं जब कुछ विफल हो जाता है – जो ठीक उसी समय होता है जब आपको लापता त्रुटि प्रबंधन की आवश्यकता होती है।

प्रश्न: क्या मुझे .कैच() या ट्राई/कैच का उपयोग करना चाहिए?
ए: एसिंक/वेट (क्लीनर, ऊपर से नीचे तक पढ़ता है) के साथ ट्राई/कैच का उपयोग करें। प्रॉमिस चेन (.then) के साथ .catch() का उपयोग करें। दोनों अस्वीकृतियों को संभालते हैं – आप किस शैली का उपयोग कर रहे हैं उसके आधार पर चुनें। उन्हें एक ही फ़ंक्शन में अजीब तरह से न मिलाएं।

निष्कर्ष

“अनकॉट (वादे में)” का मतलब है कि एक एसिंक ऑपरेशन बिना किसी त्रुटि हैंडलर के विफल हो गया। समाधान हमेशा अस्वीकृति को संभालना है:जोड़ें.catch() जंजीरों का वादा करना, लपेटनाawait ट्राई/कैच में कॉल करें, और एसिंक फ़ंक्शंस की कॉल साइट पर अस्वीकृतियों को संभालें. एक वैश्विक जोड़ेंunhandledrejection लॉगिंग सुरक्षा जाल के रूप में हैंडलर, लेकिन उनके स्रोत पर वास्तविक अनचाहे अस्वीकृतियों को ठीक करें। आपके कोड में प्रत्येक एसिंक ऑपरेशन में कहीं न कहीं त्रुटि प्रबंधन होना चाहिए – यही इन त्रुटियों को खत्म करने और मजबूत एप्लिकेशन बनाने का विश्वसनीय तरीका है।