javascript - 对 Angular js 中的 $http 拦截器感到困惑

Question

确实找不到关于 Angular js 中的 http 拦截器的好的文档。在处理由 ng-include 引起的错误时，我可以使用以下方法拦截 responseError:

    app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('templateInterceptor');
});

// register the interceptor as a service
app.factory('templateInterceptor', function($q) {
  return {
    'responseError': function(rejection) {
       var isTemplate = !!rejection.config.url.match(/^content/g);
       if (isTemplate) {
         // here we add error message, but how this message appesrs in the place of ng-include
         rejection.data = '<div><template-error url="\''+ (rejection.config.url) + '\'"><strong>Error from interceptor.</strong></template-error></div>';
         return rejection;
       } else {
         return $q.reject(rejection);
       }
    }
  }
});

此代码取自此问题 how to catch angular ng-include error 。我不明白，拦截器是如何工作的？他们必须返回什么？如何使用传递给 responseError 拦截器的 rejection 参数？在 rejection 中，data 属性用于将错误消息包含到失败的 ng-include 指令的位置，这是如何工作的？

Answer 1

如果你有调用$http，例如

$http(....).then(function(results) {
  // Success callback
}, function(error) {
  // Error callback
});

服务器响应错误，然后在运行成功或错误回调之前将调用responseError拦截器。

• 如果最终拦截器返回任何不是promise的值，那么从调用代码的 Angular 来看，对$http的调用是成功的，并且成功回调将执行，将返回值作为结果参数传递

• 如果最终拦截器返回一个用值解析的 Promise，那么与上面的情况类似，从调用代码的 Angular 来看，对 $http 的调用是成功，并且将执行成功回调，并将解析值作为 results 参数传递。

• 如果最终拦截器返回一个因错误而被拒绝的 Promise，那么从调用代码的 Angular 来看，对 $http 的调用不是 成功，并且将执行错误回调，并将拒绝的错误作为 error 参数传递。

ngInclude 指令会将成功调用 $http 的结果中的 data 键注入(inject)到页面中。代码为https://stackoverflow.com/a/20838764/1319998将 ngInclude 中对 $http 的错误调用转换为成功调用，其中错误消息的 html 作为 data 键结果。