AngularJS：如何提取多请求函数至Factory及控制器数据返回问题

刚好之前做过类似的World Bank API多请求封装，给你分享下可行的方案，顺便解决你Controller返回数据的问题～

Factory的核心职责就是封装复用的API请求逻辑，这里我们用$q.all()来并行处理多个World Bank API请求，确保所有请求完成后再统一返回结果。下面是完整的Factory示例：

// factory.js
angular.module('yourApp').factory('WorldBankApiFactory', ['$http', '$q', function($http, $q) {
  return {
    // 自定义方法：传入国家列表和指标列表，批量获取数据
    getMultiIndicatorData: function(countryCodes, indicatorCodes) {
      // 存储所有API请求的Promise
      const requestQueue = [];

      // 遍历指标和国家，生成每个请求的Promise
      indicatorCodes.forEach(indicator => {
        countryCodes.forEach(country => {
          // 拼接World Bank API的请求URL，注意加format=json参数
          const apiUrl = `https://api.worldbank.org/v2/country/${country}/indicator/${indicator}?format=json`;
          requestQueue.push($http.get(apiUrl));
        });
      });

      // 合并所有请求，等待全部完成后处理结果
      return $q.all(requestQueue)
        .then(responses => {
          // 整理返回的数据：World Bank API返回的是[元数据, 实际数据]的数组，我们提取实际数据部分
          return responses.map(res => res.data[1] || []);
        })
        .catch(error => {
          console.error('API请求失败:', error);
          throw error; // 把错误抛给Controller处理
        });
    }
  };
}]);

关键细节：

• 用$q.all()批量处理异步请求，它会等待所有Promise完成后返回一个包含所有结果的数组
• 每个$http.get()本身就是一个Promise，直接加入请求队列即可
• 处理响应时要注意World Bank的返回格式：默认是JSON数组，第一个元素是分页等元数据，第二个才是我们需要的指标数据

你之前返回数据出错，大概率是因为尝试同步返回异步请求的结果——API请求是异步的，在请求完成前数据还没拿到，直接return肯定会出问题。正确的做法是通过Promise的.then()回调接收数据，再绑定到视图：

// controller.js
angular.module('yourApp').controller('DataController', ['$scope', 'WorldBankApiFactory', function($scope, WorldBankApiFactory) {
  // 示例：要获取的国家和指标
  const targetCountries = ['USA', 'CHN', 'IND'];
  const targetIndicators = ['NY.GDP.MKTP.CD', 'SP.POP.TOTL'];

  // 调用Factory的批量请求方法
  WorldBankApiFactory.getMultiIndicatorData(targetCountries, targetIndicators)
    .then(allData => {
      // 请求成功：把数据绑定到$scope，供视图使用
      $scope.worldBankData = allData;
      console.log('所有请求完成，数据已获取:', allData);
      
      // 如果需要对数据做进一步合并/筛选，在这里处理
      // 比如把同一个国家的不同指标数据合并成对象
      // $scope.processedData = processYourData(allData);
    })
    .catch(error => {
      // 请求失败：给用户提示错误信息
      $scope.errorMsg = '数据加载失败，请稍后重试';
      console.error('Controller处理错误:', error);
    });

  // ❌ 错误示例：不要直接return异步数据，此时$scope.worldBankData还是undefined
  // return $scope.worldBankData;
}]);

在视图里可以这样用（以AngularJS为例）：

<!-- 数据加载完成前显示加载提示 -->
<div ng-if="!worldBankData">加载中...</div>

<!-- 数据加载完成后显示内容 -->
<div ng-if="worldBankData">
  <div ng-repeat="dataSet in worldBankData">
    <h3>指标数据</h3>
    <ul>
      <li ng-repeat="item in dataSet">{{item.country.value}} - {{item.date}}: {{item.value}}</li>
    </ul>
  </div>
</div>

<!-- 显示错误信息 -->
<div ng-if="errorMsg" class="error">{{errorMsg}}</div>

如果还是有问题，可以从这几点检查：

1. Factory是否正确注入依赖：确保$http和$q已经注入到Factory里，没注入会直接报错
2. API URL是否正确：检查国家代码（比如USA、CHN）和指标代码（比如NY.GDP.MKTP.CD是GDP）是否正确，有没有漏加format=json
3. 跨域问题：World Bank API本身支持CORS，但如果本地开发遇到跨域错误，可以试试用浏览器的CORS插件临时解决，或者在后端配置代理
4. 错误处理是否完整：Factory里捕获错误后要throw error，这样Controller才能通过.catch()接收并处理

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