$http异步请求后scope.mediafiles无法显示问题求助

This is a classic asynchronous timing issue—$http requests in AngularJS run asynchronously, meaning your code doesn't wait for the server response before moving on. Here's the play-by-play:

1. When you call foo(myCallback), the $http request gets sent immediately, but the JavaScript engine doesn't pause to wait for the response. It jumps right to the next line: console.log(scope.mediafiles).
2. At that point, the server hasn't sent back any data yet, so scope.mediafiles hasn't been assigned a value—hence the undefined.
3. Only after the server responds does myCallback fire, setting scope.mediafiles to the result, which is why the console.log inside the callback works.

Fixes You Can Use #

1. Use $http's Promise Chain (Recommended) #

$http returns a Promise, which is a cleaner, more maintainable way to handle async operations (note: the .success() method is deprecated in AngularJS, so .then() is the way to go):

foo = function() { 
  return $http({
    method: "get",
    url: "http://myhost/bananas",
    options: {}
  });
}

// Handle the response with .then()
foo().then(function(response) {
  // In Promise callbacks, the response data lives in response.data
  scope.mediafiles = response.data;
  console.log(scope.mediafiles); // This will log the correct data
  
  // Any logic that depends on scope.mediafiles should go here
  // For example, updating your view or calling a render function
  updateMediaView();
});

// If you need to run code after scope.mediafiles is set, chain another .then()
foo().then(function(response) {
  scope.mediafiles = response.data;
}).then(function() {
  console.log(scope.mediafiles); // Also works here
});

2. Extend Your Callback Logic #

If you want to stick with the callback pattern, make sure all code that relies on scope.mediafiles runs inside or after the callback—don't try to access it synchronously outside:

foo = function(callback) { 
  $http({
    method: "get",
    url: "http://myhost/bananas",
    options: {}
  }).success(callback);
}

myCallback = function(result) { 
  scope.mediafiles = result;
  console.log(scope.mediafiles); // Works as expected
  
  // Call any functions that need the mediafiles data here
  renderMediaFiles();
}

function renderMediaFiles() {
  console.log(scope.mediafiles); // Correct value here
  // Add your view rendering or data processing logic here
}

foo(myCallback);

Quick Note for AngularJS #

If you ever modify $scope outside of Angular's built-in async handlers (like $http callbacks), you'd need to call $scope.$apply() to trigger a view update. But in this case, $http automatically handles this for you, so no extra work needed.

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