(Angular)Js - 如何简化承诺结果？

Question

本人是嵌入式C出身，AngularJs自学1.x；我怀疑我的问题是一个通用的 JS 问题，而不是 AngularJs 特定的。

我发现我的代码中重复出现这种模式：

                $http.get(url)
                    .success(function(data, status, headers, config)
                    {
                       console.log('Success');
                    });

               })
                .error(function(data, status, headers, config)
                {
                    console.error('Error !');
                });

作为一个 C 语言的人，我不喜欢 lambda，尽管我对回调很满意。

成功和失败部分的代码可能非常大，这使代码看起来很乱 - 特别是看到所有代码都作为参数传递时。

我猜测 $http is/are (a) promise(s) 的参数。

有什么方法可以使代码更模块化，更易于阅读和维护吗？

例如，我想象我可以声明一些 success/failure 函数并调用它们，词干如下：

function it_succded(data, status, headers, config))
{
    console.log('Success');
});

function it_failed(data, status, headers, config)
{
    console.error('Error !');
});

$http.get(url)
.success(function(data, status, headers, config)
 {
     it_succded(data, status, headers, config))
   });
})
.error(function(data, status, headers, config)
 {
    it_failed(data, status, headers, config)
  });
});

当然可以直接码出来看看，但是想学所以问这里，希望有懂的人解释一下，最好是码(Angular)Js专业的人.

Answer 1

要使用 promise 接口，您不应使用 .success() 或 .error()：它们是 deprecated。相反，请使用 .then() 和 catch()。这些回调接收的参数略有不同：

$http.get(url).then(function(response) {
     console.log("Success", response.data);
}).catch(function(response) {
     console.log("Error", response.status);
});

response 是具有预期 properties:

的 object

data – {string|Object} – 使用转换函数转换的响应 body。
status – {number} – 响应的 HTTP 状态代码。
headers – {function([headerName])} – Header getter 函数。
config – {Object} – 用于生成请求的配置 object。
statusText – {string} – 响应的 HTTP 状态文本。
xhrStatus – {string} – XMLHttpRequest 的状态（完成、错误、超时或中止）。

你确实可以单独定义回调函数，然后你的回调参数可以只是函数引用：

function it_succded(response) {
     console.log("Success", response.data);
}
function it_failed(response) {
     console.log("HTTP Error", response.status, response.statusText);
}
$http.get(url).then(it_succded).catch(it_failed);

您可以将这些函数定义为方法，例如在 $scope object:

$scope.it_succded = function (response) {
     console.log("Success", response.data);
     $scope.data = response.data;
}
$scope.it_failed = function (response) {
     console.log("HTTP Error", response.status, response.statusText);
}
$http.get(url).then($scope.it_succded).catch($scope.it_failed);

注意事项：请注意，当 Promise 实现调用这些回调时，不会设置 this。因此，要么不要在其中使用 this，要么将它们定义为箭头函数（this 将成为词法上下文中的任何内容），将函数绑定到特定的 this object，或提供小包装器回调：

.then(function(response) { 
     return $scope.it_succded(response);
})

Answer 2

是的，你可以。

$http({
your configs
})
.then(funtion(result){ // function on success
   return result.data // this is important as AngularJS $http will bind the data from the server into this variable
},
function(errorResponse){
if(errorResponse.status === 401){
    // your code for handling 401 errors
}
else if(errorResponse.status === 404){
    // your code for handling 404 errors
}
else if(errorResponse.status === 500){
    // your code for handling 500 errors
}
})
.then(function(data){
    // another function to process data
    return data
})
.then(function(data){
    // yet another function to process data
    return data
})

我们可以根据需要组合任意多个 then 回调。你可以从这个link阅读更多关于承诺的内容：https://scotch.io/tutorials/javascript-promises-for-dummies

希望对您有所帮助。

(Angular)Js - 如何简化承诺结果？

(Angular)Js - how to simplify promise result?

javascript

angularjs

promise

angular-promise