Angular $http success方法废弃后的代码修改求助

我完全懂你的困扰——跟着旧版本的MEAN栈书籍学习，碰到框架API变更卡壳太常见了！别担心，我帮你把旧的$http.success()写法无缝转换成新的.then()语法，还会把关键差异说清楚，让你能继续跟着书里的逻辑走。

核心差异先搞明白 #

旧版本Angular（1.4及以前）里的$http.success()和$http.error()是专门的快捷方法，它们会自动把响应里的data、status等参数拆出来直接传给回调；而新版本（1.5+开始逐步废弃并最终移除）统一用.then()，它的回调函数接收的是完整的响应对象，你得自己从中提取需要的内容。

代码转换示例 #

书中的旧代码（$http.success写法） #

假设书里的代码是这样的：

$http.get('/api/data')
  .success(function(data, status, headers, config) {
    // 直接使用data处理逻辑
    $scope.items = data;
    console.log('请求状态:', status);
  })
  .error(function(data, status, headers, config) {
    console.error('请求失败:', status, data);
  });

转换成新的.then写法 #

你需要改成这样：

$http.get('/api/data')
  .then(function(response) {
    // 响应对象response里包含data、status、headers、config等属性
    $scope.items = response.data;
    console.log('请求状态:', response.status);
  }, function(errorResponse) {
    // 错误回调同样接收完整的错误响应对象
    console.error('请求失败:', errorResponse.status, errorResponse.data);
  });

容易踩的坑提醒 #

• 别忘了.then()的第二个参数是错误回调，如果只写第一个参数，错误不会被捕获（如果需要全局处理错误可以用.catch()，和第二个参数作用类似，但写法更灵活）：

  $http.get('/api/data')
    .then(function(response) {
      $scope.items = response.data;
    })
    .catch(function(errorResponse) {
      console.error('请求失败:', errorResponse.status);
    });
  

• 如果你习惯了旧写法里直接拿data，一定要记得在新写法里加.data属性，这是最容易忘的点！
• 有些旧书里可能会在$http配置里做一些特殊处理，比如自定义headers，这些在.then()写法里完全兼容，不用改配置部分，只改回调部分就行。

继续跟着书学习的小技巧 #

你可以把这个转换逻辑记下来：每次看到书里的.success()，就替换成.then()的第一个回调，把原来回调里的参数换成response.data、response.status；.error()替换成.then()的第二个回调或者.catch()，同样用errorResponse对象里的属性。这样就能继续沿用书里的业务逻辑，只是调整API调用的写法而已。

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