最近,在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闪

Vue前端挂载对象时一些思考的更多相关文章

  1. Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令

    1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...

  2. vue中,对象数组多层嵌套时,更新数据更新页面

    vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...

  3. vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象合并到总的对象,再提交

    vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...

  4. vue 前端框架 (三)

    VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. vue前端框架面试问题汇总

    1.active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答: ...

  6. Vue前端框架面试问题

    1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答 ...

  7. Vue前端框架基础+Element的使用

    前置内容: AJAX基础+Axios快速入门+JSON使用 目录 1.VUE 1.1 概述 1.2 快速入门 1.3 Vue指令 1.3.1 v-bind & v-model 指令 1.3.2 ...

  8. Vue路由开启keep-alive时的注意点

    Vue路由开启keep-alive时的注意点   这个不是业务的要求,但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化下的加载逻辑,正好vue提供了 ke ...

  9. Vue的实例对象(三)

    一.创建一个 Vue 实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 当创建一个 Vue 实例时,你可以传入 ...

随机推荐

  1. C++泛化单链表

    泛型单链表 单链表将每个数据分为节点,每个节点存储数据和指向下一个节点的指针.这样数据就不用在内存中使用连续的存储空间,有更大的灵活性. 这里将单链表分为节点类(Node)和链表类(singleLin ...

  2. 史上最全的Java高级技术点,全是Java高级进阶技术,几乎包含了Java后端的所有知识点

    史上最全的Java高级技术点,全是Java高级进阶技术,几乎包含了Java后端的所有知识点 1

  3. PMP--3. 项目启动过程组

    ####################################################### 从第三章开始,我正式进入项目过程,启动.规划.执行.监控.收尾五大过程组的具体在之后依次 ...

  4. 1级搭建类104-Oracle 12cR2 单实例 FS(阿里云)公开

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...

  5. day 8 函数编程_byets

    定义 bytes类型是指一堆字节的集合,在python中以b开头的字符串都是bytes类型 b'\xe5\xb0\x8f\xe7\x8c\xbf\xe5\x9c\x88' #b开头的都代表是bytes ...

  6. Mysql基础04-查询

    关联查询 1.内连接:实现A∩B select 字段列表 from A表 inner join B表 on 关联条件 where 等其他子句; 2.左外连接 #实现查询结果是A select 字段列表 ...

  7. windows 2008r2+php5.6.28搭建详细过程

    安装IIS7 1.打开服务器管理器(开始-计算机-右键-管理-也可以打开),添加角色 直接下一步 勾选Web服务器(IIS),下一步,有个注意事项继续下一步(这里我就不截图了) 勾选ASP.NET会弹 ...

  8. JDK13.0.1安装与环境变量的配置(Win10平台为例)

    一.下载与安装 Oracle官网下载:https://www.oracle.com/technetwork/java/javase/downloads/index.html,点击右侧下载 接受并下载对 ...

  9. API接口幂等性设计

    目录 幂等性场景 解决方案 幂等性场景 网络延迟导致多次重复提交. 表单重复提交. 解决方案 每次提交都使用一个Token,Token保证临时且唯一即可 token生成规则(单机应用):token+U ...

  10. MyBatis的基本注解

    MyBatis的基本注解: 增删改查 @Select("select * from teacher") public List<Teacher> selAll(); / ...