Angular 1.6.9中$http.Jsonp()解析响应失败问题求助

我完全理解你升级版本后遇到的困扰——从Angular 1.4.9切换到1.6.9，原本用.success()能正常解析JSONP响应的代码，换成.then()和$sce.trustAsResourceUrl()后突然失效了。这个问题的核心在于两个版本间的API差异和JSONP请求的细节要求，我来帮你拆解解决：

核心差异点 #

首先要明确：.success()的回调是直接把响应数据作为参数传入，而.then()的回调接收的是完整的响应对象，实际业务数据需要从response.data属性中获取，这是很多人升级后踩的第一个坑。

另外，Angular 1.6对JSONP请求的URL格式有严格要求，必须包含JSON_CALLBACK占位符，Angular会自动将其替换为生成的回调函数名，服务端需要正确返回以这个回调包裹的JSON数据。

分步解决方案 #

1. 确保URL包含JSON_CALLBACK占位符
   你的请求URL必须带上callback=JSON_CALLBACK参数（如果服务端要求的回调参数名不是callback，需要额外配置$httpProvider）。示例：

   const trustedUrl = $sce.trustAsResourceUrl('https://your-api-url.com/data?callback=JSON_CALLBACK');
   

2. 正确使用.then()的回调结构
   不要直接把.then()的参数当成数据，要从响应对象中提取数据：

   $http.jsonp(trustedUrl)
     .then(response => {
       // 实际数据在response.data属性中
       const parsedData = response.data;
       console.log('解析完成的数据:', parsedData);
       // 在这里处理你的业务逻辑
     })
     .catch(error => {
       console.error('JSONP请求出错:', error);
     });
   

3. （可选）配置自定义回调参数名
   如果你的服务端要求回调参数名不是callback（比如jsonp），需要在模块配置中修改$httpProvider的默认值：

   angular.module('yourApp', [])
     .config(function($httpProvider) {
       $httpProvider.defaults.jsonpCallbackParam = 'jsonp';
     });
   

新旧写法对比 #

• 旧版.success()写法（Angular 1.4）：

  $http.jsonp(trustedUrl)
    .success(data => {
      // 直接拿到数据
      console.log(data);
    });
  

• 新版.then()写法（Angular 1.6）：

  $http.jsonp(trustedUrl)
    .then(response => {
      // 从response.data中获取数据
      console.log(response.data);
    });
  

常见排查点 #

• 检查浏览器控制台是否有CORS或回调函数未找到的错误，如果有，确认服务端返回的回调函数名和Angular自动生成的一致；
• 确保$sce.trustAsResourceUrl()处理的是完整的、包含JSON_CALLBACK的URL，不要遗漏参数。

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