嗨!JSer,你知道拦截器(interceptor)么?

4,221 阅读1分钟

拦截器-interceptor

在现代的一些前端框架上,拦截器基本上是很基础但很重要的一环,比如Angular原生就支持拦截器配置,VUE的Axios模块也给我们提供了拦截器配置,那么拦截器到底是什么,它有什么用?

拦截器字面上理解就是用来拦截的工具,一说到互联网上的拦截工具你应该立马能想到电脑的防火墙,对,拦截器的功能其实和防火墙一样,就是拦截出站和入站的规则

拦截器能帮助我们解决的

  • 添加统一的request的参数
    比如header中加入X-Requested-With,比如客户端需要实现sign和token的验证机制,比如你可以写$http.get('/files', params),拦截器帮你拼接成http://www.xxxx.com/1/files这样的请求地址
  • 处理统一的responseError
    比如重连机制,拿到error.code错误码重连,比如token过期,重新拿到token再次send request
    比如统一报错信息,给所有返回的404来个提示也会很酷
  • 等等

angular interceptor

angular的interceptor是个数组,在$httpProvider中进行配置,一般写成一个config, 然后$httpProvider注入进来就可以配置了,把我们写的interceptorpush进去就OK了,$httpProvider.interceptors.push('interceptor'),interceptor一般写成一个服务

var interceptor = {
	'request': function (config) {
		return config
	},
	'requestError': function (rejection) {
		
	},
	'response': function (response) {
		return response
	},
	'responseError': function (rejection) {

	}
}

return支持返回一个promise,可以对config中的params,data, url, headers等进行加工,符合我们的请求再return出去,所有的$http请求都会被拦截到


本文对你有帮助?欢迎扫码加入前端学习小组微信群: