javascript - 如何在 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。处理响应错误:

您应该创建一个返回响应处理程序的工厂，而不是具有“请求”功能的对象，因为您只对失败的响应感兴趣，您应该实现并返回一个带有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 的小插曲