拦截$http请求修改api调用url答案

【问题标题】：incercept $http request to modify api call urls拦截$http请求修改api调用url
【发布时间】：2015-10-09 22:22:04
【问题描述】：

var app = angular.module('app');
// register the interceptor as a service
app.factory('myHttpInterceptor', function($q ) {
    return {

        'request': function(config) {
            return config;
        }
    };
});

我正在尝试修改 api 调用的 url 并将 api url 附加到每个服务函数的拦截器中的 ajax 调用的开头，例如

    function getAssesmentResults(params) {

        return $http.get(url.api + '/results', {params: params})
            .then(function(response) {
                return response.data;
            });
    }

但是，拦截器会拦截所有 http 请求，例如 .css 或 .html 或 .json 文件。在不修改其他http请求的情况下修改拦截器中的url有什么好方法？

【问题讨论】：

您的所有 API 调用是否有共同点？

标签： angularjs api angular-http-interceptors

【解决方案1】：

在$httpProvider 上配置的$http has a facility to intercept and rewrite URLs。当我在生产中运行时，我有一个额外的令牌：'/rest/' 与开发模式相比，我在拦截器中检测到生产模式（前缀 packing ）。这是我的app.js

var rest_srvr = 'http://dev-pc.example.com:8000'
app.factory('REST_Interceptor',[
        '$location',
function($location) {
  var request = function(config) {
    if (RegExp('packing','i').test(window.location.host)) {
      return config
    }
    var rest_request_regex = new RegExp('^.*?/rest/(.*)$')
    //console.log('config.url=%s',config.url)
    config.url = config.url.replace(rest_request_regex,rest_srvr+'/$1')

    var files_request_regex = new RegExp('^/(files/(.*))$')
    config.url = config.url.replace(files_request_regex,rest_srvr+'/$1')
    //console.log('  is now config.url=%s',config.url)
    return config
  }

  var translate_subpath = function(subpath) {
    return request({url:'https://'+$location.host()+subpath}).url 
  }

  return {
    request: request,
    translate_subpath: translate_subpath
  }
}])

app.config([
          '$httpProvider','$cookiesProvider',
  function($httpProvider,  $cookiesProvider) {
    if (!RegExp('packing','i').test(window.location.host)) {
      $httpProvider.interceptors.push('REST_Interceptor')
    }
}])

【讨论】：

如果我错了，请纠正我。所以我相信你建议使用这样的东西。所以基本上我会将 api url 路径附加到 api 调用，但不会修改对静态资源的调用 if(response.config.url.startsWith('/api/')) { //在此处进行自定义处理 }
没错。这就是像var files_request_regex = new RegExp('^/(files/(.*))$') 和config.url = config.url.replace(files_request_regex,rest_srvr+'/$1') 这样的行。

【解决方案2】：

我将创建一个包装$http 的服务。然后在您的代码中，您将始终调用此包装而不是$http，并且可以在发送请求之前对请求执行任何操作。只是一个简单的例子：

module.factory('myHttp', function($http){
  return {
    get: function(url, params){
      var newUrl = "base-api-url/" + url;
      return $http.get(newUrl, params);
    }
  }
})

【讨论】：

【解决方案3】：

为此使用通用服务：

通用服务

appCless.factory("$comum", function($http, $q, $injector) {
    function ajax(url, parametros, metodo) {
        var requisicao = $http({
            method: metodo,
            url: url,
            data:parametros
        });

        var promessa = requisicao.then(
            function(resposta) {
                return(resposta.data);
            },
            function(resposta) {
                return($q.reject("Something went wrong"));
            }
        );
        return promessa;
    }
    return({
        ajax:ajax
    });
});

服务

app.factory("$categoriaproduto", function($comum) {
    var categoria;
    return {
        buscar : function(neoId) {
            var promessa = $comum.ajax("/fusion/services/roi/category/product/search", "", "POST");
            promessa.then(function(req) {  
                categoria = req.data;
            });
            return promessa;
        },
        cache : function() {
            return categoria;
        }
    };
});

【讨论】：