AngularJS中如何通过一次AJAX($http)请求获取数据并应用到所有控制器

我完全懂你的困扰——不想每个控制器都重复发请求，就想一次拉取数据后全应用共用。其实AngularJS的服务（Factory/Service）本身就是单例设计，刚好适配这个需求，可能之前你没处理好异步逻辑或者数据存储的方式。下面给你一套完整的可行方案：

步骤1：创建共享数据的Factory #

我们先写一个Factory，专门负责发起一次$http请求，把数据存起来，同时提供方法让控制器安全获取数据（包括处理异步等待的场景）：

angular.module('myApp', [])
.factory('SharedDataService', function($http) {
  // 存储共享的数据，存在闭包中保持全局唯一
  var sharedData = {};
  // 标记是否已经完成请求，避免重复发起AJAX
  var hasFetchedData = false;

  return {
    // 获取数据的核心方法，返回Promise保证异步逻辑统一
    getWelcomeData: function() {
      // 如果已经请求过，直接返回已缓存的数据（包装成Promise，保持接口一致）
      if (hasFetchedData) {
        return Promise.resolve(sharedData);
      }
      // 首次请求，发起AJAX
      return $http.get('/api/welcome-message') // 替换成你的实际接口地址
        .then(function(response) {
          // 把接口返回的数据存入共享变量
          sharedData = response.data;
          hasFetchedData = true;
          return sharedData;
        })
        .catch(function(error) {
          console.error('获取欢迎数据失败:', error);
          throw error; // 抛出错误让控制器可以自定义处理
        });
    },
    // 可选：如果需要手动刷新数据，可以加这个方法
    refreshWelcomeData: function() {
      hasFetchedData = false;
      return this.getWelcomeData();
    }
  };
});

步骤2：在任意控制器中使用这个Factory #

不管有多少个控制器，只要依赖这个Factory，就能拿到同一份数据，不会重复发请求：

示例控制器1（对应你给出的模板） #

angular.module('myApp')
.controller('WelcomeController', function($scope, SharedDataService) {
  // 调用服务方法，等待数据加载完成后赋值到$scope
  SharedDataService.getWelcomeData()
    .then(function(data) {
      $scope.myWelcome = data.welcomeMessage; // 假设接口返回的字段是welcomeMessage
    })
    .catch(function(error) {
      $scope.myWelcome = '加载失败，请稍后重试';
    });
});

示例控制器2（另一个页面/组件的控制器） #

angular.module('myApp')
.controller('HeaderController', function($scope, SharedDataService) {
  // 这里不会发起新请求，直接用之前缓存的数据
  SharedDataService.getWelcomeData()
    .then(function(data) {
      $scope.headerWelcome = data.welcomeMessage;
    });
});

步骤3：HTML模板使用 #

对应你给出的片段，这样写就可以了：

<div ng-app="myApp" ng-controller="WelcomeController">
  <p>Today's welcome message is:</p>
  <h1>{{myWelcome}}</h1>
</div>

<!-- 另一个使用共享数据的组件 -->
<div ng-controller="HeaderController">
  <p>页面顶部的欢迎语：</p>
  <h4>{{headerWelcome}}</h4>
</div>

关键要点解释 #

• 单例特性：AngularJS的Factory是单例的，整个应用里只有一个SharedDataService实例，闭包里的sharedData和hasFetchedData是全局共享的。
• 避免重复请求：用hasFetchedData标记请求状态，第二次调用getWelcomeData时直接返回缓存数据。
• 异步兼容：返回Promise确保控制器能正确等待数据加载完成，不会出现{{myWelcome}}一直为空的情况。

如果之前用Factory没成功，大概率是没处理好异步逻辑，或者没把数据存在服务的闭包变量里（比如每次调用都重新创建对象，而不是存在Factory的持久变量中）。按照上面的写法应该就能解决你的问题了～

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