带回调函数的异步JavaScript中Try/catch块失效问题咨询

I wrote the following JavaScript code, expecting that when the content of the asynchronously read file doesn't match what I expected, the catch block would catch the error and output "Hello from the catch block". However, the console only outputs Error: That was unexpected (line 13) and the catch block never runs. Why is this happening?

function backgroundReadFile(url, callback) { 
  var req = new XMLHttpRequest(); 
  req.open("GET", url, true); 
  req.addEventListener("load", function() { 
    if (req.status < 400) callback(req.responseText); 
  }); 
  req.send(null); 
} 
try { 
  backgroundReadFile("example/data.txt", function(text) { 
    if (text != "expected") throw new Error("That was unexpected"); 
  }); 
} catch (e) { 
  console.log("Hello from the catch block"); 
}

Answer: #

The short answer is: your outer try/catch can't catch errors thrown inside the async callback—and here's why:

When you call backgroundReadFile, it fires off an asynchronous XMLHttpRequest. This request runs in the background, while the main thread continues executing code. The try/catch block wraps the call to backgroundReadFile, but that call finishes almost instantly (all it does is set up the request and send it). By the time the request completes and your callback function runs, the original try/catch block has already finished executing, and its scope is long gone.

Errors thrown in async callbacks belong to a completely different call stack—one that's triggered later when the browser processes the "load" event from the XHR. The outer try/catch has no way to "reach back" and catch errors that happen in this delayed execution context.

How to fix this: #

You have two solid options to handle errors in this scenario:

1. Handle errors inside the callback (or wrap the callback code in its own try/catch)

Move your error handling logic into the callback itself, or wrap the code that might throw in a local try/catch:

function backgroundReadFile(url, callback) { 
  var req = new XMLHttpRequest(); 
  req.open("GET", url, true); 
  req.addEventListener("load", function() { 
    if (req.status < 400) callback(req.responseText); 
  }); 
  req.send(null); 
} 

backgroundReadFile("example/data.txt", function(text) { 
  try {
    if (text != "expected") throw new Error("That was unexpected"); 
  } catch (e) {
    console.log("Hello from the catch block");
  }
});

2. Use Promises with async/await (modern approach)

Wrap your XHR logic in a Promise, then use async/await to write asynchronous code that looks synchronous—this lets you use a single try/catch block for both the async request and any errors in your post-processing:

function backgroundReadFile(url) {
  return new Promise((resolve, reject) => {
    const req = new XMLHttpRequest();
    req.open("GET", url, true);
    
    req.addEventListener("load", () => {
      if (req.status < 400) {
        resolve(req.responseText);
      } else {
        reject(new Error(`Request failed: ${req.status}`));
      }
    });
    
    req.addEventListener("error", () => {
      reject(new Error("Network request failed"));
    });
    
    req.send(null);
  });
}

async function processFile() {
  try {
    const text = await backgroundReadFile("example/data.txt");
    if (text != "expected") throw new Error("That was unexpected");
  } catch (e) {
    console.log("Hello from the catch block");
  }
}

processFile();

内容的提问来源于stack exchange，提问作者Vadim Anisimov