最近抽空学习了一下Angular6之前主要使用的是vue，所以免不了的也想对Angular6提供的工具进行一些封装今天主要就跟大家讲一下这个http模块。

之前使用的ajax库是axios可以设置baseurl，公共头部；集中捕捉错误等由于Angular6的依赖注入机制，是不能通过直接修改http模块暴露的变量来封装的但是通过官方文档我们知道可以通过来实现这一功能。

拦截器可以拦截请求也可以拦截响应，那么通过拦截请求就可以实现 设置baseurl公共头部；而通过拦截响应就可以实现 集中捕获错误 。废话不多说上代码吧。

第二步：新建有关拦截器的文件

/*设置请求的基地址方便替换*/
 /*此处设置额外的头部，token常用于登陆令牌*/
 /*失败时重試2次可自由设置*/
 /*捕获响应错误，可根据需要自行改写我偷懒了，直接用的官方的*/
 

为了方便后台修改baseurl我们可以将baseurl提取为全局变量，在index.htmlΦ进行设置

这样一来，如果后台要修改的话只需修改index.html中的变量即可，无需再次编译还有，像这些后期可能更改的变量建议是直接放在index.html中，因为缓存的原因如果放在js文件中再引入的话，文件并不能及时更新或是每次都需要更改文件名会导致不必要的麻烦。

至此Angular6嘚http模块封装已经基本完成，如果有需要可以自行扩展可参考第二步。

2.vue的双向邦定是基于ES5 中的 getter/setter来实现的而angular而是由自己实现一套模版编译規则，需要进行所谓的“脏”检查vue则不需要。因此vue在性能上更高效，但是代价是对于ie9以下的浏览器无法支持

3.vue需要提供一个el对象进行實例化，后续的所有作用范围也是在el对象之下而angular而是整个html页面。一个页面可以有多个vue实例，而angular好像不是这么玩的

4.vue真的很容易上手，學习成本相对低不过可以参考的资料不是很丰富，官方文档比较简单缺少全面的使用案例。高级的用法需要自己去研究源码，至少目前是这样

以上所述是小编给大家介绍的Angular6封装http请求的步骤详解，希望对大家有所帮助如果大家有任何疑问请给我留言，小编会及时回複大家的在此也非常感谢大家对脚本之家网站的支持！