如何解决AngularJS $ httpProvider拦截器中的请求？

Question

我希望我在这里遗漏一些东西，因为这看起来应该非常简单。

我想创建一个$ httpProvider拦截器来查看传出的$ http请求以及某些（在这种情况下，那些触及不存在的端点的拦截器，我想假装响应）不要提出请求，而是使用一些虚假的响应数据来解决它。

我现在就在这里：

myApp.factory('mockedAPIResponses', ['$q', function($q) {


 return {
    request: function(config) {
      if (/check for endpoint here/.test(config.url)) {
        // Resolve request such that it actually makes a request to the server
        var defer = $q.defer(config.timeout),
            resolvedRequest = defer.resolve({ fakeResponseData : 'foo'});
        return resolvedRequest;
      }
      return config;
    }
  }
}]);

Answer 1

一些选项

1。处理响应错误：

您应该创建一个在您的情况下返回响应处理程序的工厂，而不是具有'request`函数的对象，因为您只对失败的响应感兴趣，您应该使用 responseError <实现并返回一个对象/ strong>方法：

function factory($q) {

   return  { 
        responseError: function(response){
              if (response.status === 404) { l
                  // handle response
                  return $q.resolve(response)
              }

              return $q.reject(response);
        }
    }
}

如果您无法处理响应，则应拒绝该响应，以便链中的其他处理程序（如果有）有机会处理它

2。中止请求并处理错误：

您可以使用request()方法中止请求，然后使用responseError()方法处理已中止的请求。如果要将其与常规响应错误区分开来，请添加一些自定义属性或代码：

function factory($q) {

  return {

    request: function(config) {

      if (/bad/.test(config.url)) {
        config.statusText = 'Non existing path';
        config.status = 404;

        return $q.reject(config);
      }

      return config;
    },

    responseError: function(response) {

      if (response.status === 404) {
        // Handle not found errors

        response.status = 200;
        response.statusText = 'OK';
        response.data = {fake: 'data'}
        return $q.resolve(response);
      }

      return $q.reject(response);
    }
 }

这是plunk首先检查请求，如果它无效则中止它。然后由responseError()方法处理。您可以检查网络选项卡中没有提出实际请求。

3。使用缓存：

另一个解决方案（也许最简单）是将请求重定向到缓存路由：

function factory($cacheFactory, $q) {

  var cache = $cacheFactory('fakePages');
  cache.put('cachedUrl', {fake: 'data'});

  return {

    request: function(config) {
      if (/bad/.test(config.url)) {
        config.url = 'cachedUrl';
        config.cache = cache;
      }

      return config;
    }
  }

}

以下是cache implementation

的插件