如何在Fetch外部调用其内部定义的JavaScript函数？

Hey there! Let's figure out why you're getting that ReferenceError and fix it up. The core issue here is JavaScript function scope—the functions you defined inside the .then() callback are only accessible within that callback, which is why trying to call DELTA_location from outside throws an error.

In JavaScript, any function or variable declared inside another function is "private" to that outer function by default. Your DELTA_location and GetSortOrder are tucked inside the second .then() callback, so code outside of that callback (like your button click handler or direct function call) has no way to see them.

Solution 1: Move functions to an outer scope #

Since your DELTA_location function doesn't actually rely on the json data from the fetch (it just handles DOM manipulation), you can move it (and GetSortOrder) to a broader scope (like the global scope, or a module scope if you're using modules). This makes them accessible everywhere you need them:

// Define these functions outside the fetch chain
function GetSortOrder(prop) {
  return function(a, b) {
    if (a[prop] > b[prop]) { return 1; }
    else if (a[prop] < b[prop]) { return -1; }
    return 0;
  }
}

function DELTA_location(currrentlLocation) {
  var parentlocation = document.getElementById("delta");
  var dirLocation = document.createElement("div")
  var dirLocationText = document.createElementNS("http://www.w3.org/1999/xhtml","a")
  var lastChar = currrentlLocation.substr(-1);
  parentlocation.append(dirLocation)
  dirLocation.append(dirLocationText)
  dirLocation.setAttribute("class","delta-location")
  if (lastChar != '/') {
    currrentlLocation = currrentlLocation + '/';
  }
  dirLocationText.innerHTML = currrentlLocation
}

// Now use them in your fetch call
fetch(api_TreeURL)
 .then(function(response) { return response.json() })
.then(function(json) {
  // You can still call GetSortOrder here to process your data, e.g.:
  // const sortedData = json.sort(GetSortOrder("name"));
})
.catch(function(ex) {
  console.log('parsing failed', ex)
})

Now you can call DELTA_location("test") from anywhere—whether it's a button click handler or direct code—and it will work without scope errors.

Solution 2: If you need access to fetch data in the function #

If later you modify DELTA_location to use the json data from the fetch, you can store that data in an outer variable so the function can access it:

let fetchedTreeData = null; // Outer variable to hold fetch results

function DELTA_location(currrentlLocation) {
  // Check if data is available first
  if (!fetchedTreeData) {
    console.log("Wait, we haven't fetched the data yet!");
    return;
  }
  
  // Your existing DOM code here...
  // Plus any logic using fetchedTreeData
}

fetch(api_TreeURL)
 .then(function(response) { return response.json() })
.then(function(json) {
  fetchedTreeData = json; // Save data to outer variable
  // Process data with GetSortOrder if needed
})
.catch(function(ex) {
  console.log('parsing failed', ex)
})

Quick note for new JS devs #

Understanding scope is key here—think of each function as a closed box. Things inside the box can't be seen from outside unless you explicitly expose them (like moving them outside the box, or storing them in a variable that lives outside). This helps keep your code organized and avoids accidental conflicts.

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