2017-11-18 93 views
1

我刚刚使用Yeoman构建了我的第一个AngularJS应用程序。我已经做到了,像这样:将标题添加到由Yeoman创建的AngularJS应用程序中的所有请求

$ yo angular frontend 

其结果是,我有一大堆标准的文件夹和文件等:

- app 
    - images 
    - scripts 
     app.js 
    - styles 
    - views 
    index.html 
    ... 
- bower_components 
- node_modules 
- test 

好像我不得不改变app.js文件以便为所有请求添加标题。但是我对AngularJs非常陌生,我不知道我该怎么做。现在,app.js的样子:

angular 
    .module('frontend', [ 
     ... 
    ]) 
    .config(function($routeProvider){ 
     $routeProvider 
      .when(...) 
    }); 

我想,我需要设置$httpProvider,但我怎么能做到这一点?

+0

启动(https://docs.angularjs.org/api/ng/provider/$httpProvider) – charlietfl

回答

1

您应该为此使用interceptor。下面是从AngularJS文档的推荐方式:

// register the interceptor as a service 
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) { 
    return { 
    // optional method 
    'request': function(config) { 
     // do something on success 
     return config; 
    }, 

    // optional method 
    'requestError': function(rejection) { 
     // do something on error 
     if (canRecover(rejection)) { 
     return responseOrNewPromise 
     } 
     return $q.reject(rejection); 
    }, 



    // optional method 
    'response': function(response) { 
     // do something on success 
     return response; 
    }, 

    // optional method 
    'responseError': function(rejection) { 
     // do something on error 
     if (canRecover(rejection)) { 
     return responseOrNewPromise 
     } 
     return $q.reject(rejection); 
    } 
    }; 
}); 

$httpProvider.interceptors.push('myHttpInterceptor'); 

所有你需要做的是落实'request'方法,因为所有的方法都是可选的。提供的配置对象是一个角度为$http的配置对象,它包含一个headers属性。你应该能够很轻松地添加你的头到这一点:

config.headers.myHeader = myValue; 
return config; 

你可以抓住在你的配置博客的$httpProvider简单地将其添加到参数列表:

angular 
    .module('frontend', [ 
     ... 
    ]) 
    .config(function($routeProvider, $httpProvider, $provide){ 
     $routeProvider 
      .when(...) 

     // register the interceptor as a service 
     $provide.factory('myHttpInterceptor', function() { 
      return { 
      // optional method 
      'request': function(config) { 
       config.headers.myHeader = myValue; 
       return config; 
      }, 
      }; 
     }); 

     $httpProvider.interceptors.push('myHttpInterceptor'); 
    }); 
+0

我应该把这个代码在'应用程序。 js' fil è?如果我使用了这样一个'拦截器',那么为所有请求设置一些任意头部的正确方法是什么?我想,我应该编辑'request'方法? – Jacobian

+0

也可以在不需要拦截器的情况下设置默认值 – charlietfl

+0

@charlietfl。你会如此友善,给一个代码片段,我应该添加到我的app.js文件来设置一个头,使用默认值?谢谢! – Jacobian

1

更好的解决方案,以增加在所有的请求头是readung的[$ httpProvider文档]

app.run(['$http', function ($http) { 
    $http.defaults.headers.common['myHeader'] = 'myHeaderValue'; 
}]); 
相关问题