Fatal编程技术网
  • angularjs/
  • AngularJS全局修改$http中每个请求的URL

AngularJS全局修改$http中每个请求的URL

angularjs

AngularJS全局修改$http中每个请求的URL,angularjs,Angularjs,让我们举一个简单的例子： $scope.whatDoesTheFoxSay = function(){ $http.post("/backend/ancientMystery", { ... 如何全局转换发送post请求的URL？本质上，我想为每个http请求预先添加一个URL 我尝试的是在$rootScope中设置一个变量，在应用程序启动时包含url。但我不希望我的代码是这样的： $scope.whatDoesTheFoxSay = function(){ $http.pos

让我们举一个简单的例子：

$scope.whatDoesTheFoxSay = function(){
    $http.post("/backend/ancientMystery", {
...
如何全局转换发送post请求的URL？本质上，我想为每个http请求预先添加一个URL

我尝试的是在
$rootScope
中设置一个变量，在应用程序启动时包含url。但我不希望我的代码是这样的：

$scope.whatDoesTheFoxSay = function(){
    $http.post($rootScope.backendUrl + "/backend/hidingDeepInTheWoods", {
...
假设我应该查看
$httpProvider.defaults.transformRequest
，对吗？有人能给我提供一些基本的示例代码吗？

我有另一种方法使用$http的请求拦截器，它将在一个公共位置处理所有url

<!doctype html>
<html ng-app="test">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>

  </head>
 <body ng-controller="test" >    


<!-- tabs -->


 <script>
     var app = angular.module('test', []);
     app.config(function ($httpProvider) {
         $httpProvider.interceptors.push(function ($q) {
             return {
                 'request': function (config) {
                     config.url = config.url + '?id=123';
                     return config || $q.when(config);

                 }

             }
         });
     });

     app.controller('test', function ($scope,$http) {
         $http.get('Response.txt').success(function (data) { alert(data) }).error(function (fail) {

         });
     });

   </script>
</body>


</html>


var app=角度模块（'测试'，[]）；
app.config（函数（$httpProvider）{
$httpProvider.interceptors.push（函数（$q）{
返回{
“请求”：函数（配置）{
config.url=config.url+'？id=123'；
返回配置| |$q.when（配置）；
}
}
});
});
app.controller（'test'，函数（$scope，$http）{
$http.get（'Response.txt'）。成功（函数（数据）{alert（数据）}）。错误（函数（失败）{
});
});
遇到了“AngularJS中的缓存破坏”问题，并希望共享一个工作解决方案，该解决方案还包括“取消缓存”选项
$templatecache
资源

此解决方案正确返回一个值，而不是一个承诺（
；）$\u GET
值，则不会形成格式错误的URL

var __version_number = 6.0; // Date.now('U'); // 'U' -> linux/unix epoch date int

app.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push(function () {
    return {
      'request': function (config) {
        // !!config.cached represents if the request is resolved using 
        //      the angular-templatecache
        if (!config.cached) {
          config.url += ( (config.url.indexOf('?') > -1) ? '&' : '?' ) 
            + config.paramSerializer({v: __version_number});
        } else if (config.url.indexOf('no-cache') > -1) {
          // if the cached URL contains 'no-cache' then remove it from the cache
          config.cache.remove(config.url);
          config.cached = false; // unknown consequences
          // Warning: if you remove the value form the cache, and the asset is not
          //          accessable at the given URL, you will get a 404 error.
        }
        return config;
      }
    }
  });
}]);
现代的方法是实现一个定制的
Http
客户端

export function getCustomHttp(xhrBackend: XHRBackend, requestOptions: RequestOptions) {
    return new CustomHttp(xhrBackend, requestOptions);
}

export class CustomHttp extends Http {
    public constructor(backend: XHRBackend, private defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    }

    public request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        url = 'https://www.customURL.com/' + url; // Of course, you'd pull this from a config
        return super.request(url, options);
    }
}
当将其与
ngToast
一起使用时，我得到一个错误
错误：[$compile:tplrt]指令“toast”的模板必须正好有一个根元素
config.url=config.url+'？id=123'；返回配置| |$q.when（配置）
在访问
config.url
之后，什么会使
config
计算为false？

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoute,
    RouterModule
  ],
  providers: [
    HttpModule,
    {
      provide: Http,
      useFactory: getCustomHttp,
      deps: [XHRBackend, RequestOptions]
    }
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }