Vue前端挂载对象时一些思考

　　最近，在Vue前端调试http请求，无论如何如何也是拦截不了某些http请求。场景是这样的：Java后端组装好Vue对象，然后送到前端，前端通过id来挂载该Vue对象，而该对象中有上传文件或者图片的控件，正是对这些控件的http请求是无法拦截的，所以导致没发设置请求头信息。后来经过对这一场景的梳理，有了一些心得，现记录如下。

　　在Vue前端开发时，可以通过id来挂载Vue对象，从而展示界面；要是这种对象都是在前端生成的话，那么处理起来很方便；要是该对象是从后端通过Java组装生成的并传输过来的话，那么有些地方或者是细节方面就需要注意了；现列举如下，以供后续参考，下面所说的Vue对象都来自后端组装生成而来。

　　(1)在该Vue对象中所有的http请求都不要直接采用axios对象，而是采用this.$http的方式，注意了$http是主工程中Vue的一个全局属性，可以在主工程中这样添加：Vue.property.$http = axios；在被挂载的Vue对象为啥要用全局方式this.$http呢？这样做的好处是方便被主工程的拦截器拦截，同时也可以继承主工程的请求头信息；若是直接采用axios对象的话，那么在主工程中是无法拦截的，更没发继承主工程的请求头信息了。

　　(2)在该Vue对象中若是需要一些额外的数据，可以通过全局属性获取，也可以通过Vue对象的属性来绑定，最好是通过一个对象的方式来绑定属性。

　　(3)在该Vue对象中若是用到element的upload组件的话，那么该http请求是不会被主工程拦截器所拦截的，并且也不会继承主工程中的请求头信息；所以当需要相关的请求头信息时要买通过全局属性来获取，要么通过数据绑定来获取；建议还是通过数据绑定来处理比较合适，比如说需要请求头信息，可以在被挂载的Vue对象中建立一个headers属性，类型为Object，默认值为{}，这样在挂载主工程某个节点时可以通过数据绑定headers属性来传给被挂载的Vue对象，以后需要添加请求头信息，只要在主工程中添加然后绑定给headers属性就可以了，而被挂载的Vue对象根本就不用感知有哪些请求头信息，它只负责填充和传输。

　　此外，在Vue中添加对http的拦截器，可以参考下面示例：

　　import axios from 'axios'

　　axios.interceptors.request.user(function(config)) {

　　　　// 这里可以进行请求之前的处理

　　}

　　axios.interceptors.response.user(function(config)) {

　　　　// 这里可以进行响应之后的处理

　　}

 

------20191225闪🚶