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

Question

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请求的情况下修改拦截器中的urls有什么好方法？

Answer 1

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

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

Answer 2

为此使用通用服务：

通用服务

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;
        }
    };
});

Answer 3

$http has a facility to intercept and rewrite URLs即配置在$httpProvider上。当我运行在生产中时，我有一个额外的标记：'/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+'/')

    var files_request_regex = new RegExp('^/(files/(.*))$')
    config.url = config.url.replace(files_request_regex,rest_srvr+'/')
    //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')
    }
}])

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

incercept $http request to modify api call urls

api

angularjs

angular-http-interceptors