AngularJS中无法获取JSONP回调响应问题求助

我看你现在用AngularJS的JSONP请求API时遇到了回调格式不匹配的问题，你的API返回的响应是这种特殊格式：

projectInstance.jsonpCallback("getActiveProduct",{"totalRecords":null,"projectSnapShot":[{"projectId":"333333","projectNumber":"123456","projectStatus":"Active"}]})

和常规JSONP只传数据的格式不一样，它给回调函数传了两个参数，而且回调函数是挂在projectInstance对象下的，咱们一步步来解决：

第一步：定义全局回调处理函数 #

因为API指定了回调要调用projectInstance.jsonpCallback，所以得先在全局作用域下创建这个对象和函数，用来接收特殊的双参数响应：

// 挂载到window上，确保全局可访问
window.projectInstance = {
  jsonpCallback: function(funcName, responseData) {
    // 这里第一个参数是"getActiveProduct"，第二个才是我们需要的实际数据
    if (funcName === "getActiveProduct") {
      // 把数据传递给服务里的deferred对象
      getActiveProductDeferred.resolve(responseData);
    }
  }
};

第二步：调整你的服务函数 #

在服务里，我们需要保存deferred对象的引用，同时告诉Angular使用我们自定义的回调函数名，以及正确的回调参数名（比如你的API用callback参数指定回调名的话）：

angular.module('你的模块名').service('项目服务', function($q, $http) {
  // 保存deferred对象，让全局回调能访问到
  var getActiveProductDeferred;

  this.getActiveProduct = function() {
    getActiveProductDeferred = $q.defer();
    var url = "myserver/getproject.json";
    
    $http.jsonp(url, {
      // 这里填你的API用来指定回调名的参数，比如大部分API用"callback"
      jsonpCallbackParam: 'callback',
      // 指定API要调用的回调函数名，就是咱们刚才定义的projectInstance.jsonpCallback
      jsonpCallback: 'projectInstance.jsonpCallback'
    }).catch(function(error) {
      // 请求失败时拒绝promise
      getActiveProductDeferred.reject(error);
    });

    return getActiveProductDeferred.promise;
  };
});

第三步：调用服务并处理数据 #

现在你就可以正常调用这个服务方法，获取到想要的项目数据了：

// 在控制器或者其他地方调用
项目服务.getActiveProduct().then(function(data) {
  console.log('拿到的活跃项目数据：', data);
  // 这里的data就是{"totalRecords":null,"projectSnapShot":[{"projectId":"333333",...}]}
}).catch(function(error) {
  console.error('请求出错啦：', error);
});

注意事项 #

• 确认你的API使用的回调参数名是什么，如果不是callback（比如有些用jsonp），记得把jsonpCallbackParam改成对应的值。
• 全局的projectInstance对象要在JSONP请求发起前就定义好，否则API返回的回调会找不到这个对象报错。

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