美文网首页
解决vue在IE中,数据不同步,视图不更新,打开ie调试时数据数

解决vue在IE中,数据不同步,视图不更新,打开ie调试时数据数

作者: Tomatoro | 来源:发表于2019-05-28 17:33 被阅读0次

    1 最近项目要支持ie,这也是最令人蛋疼的地方,相信不少朋友被之前的ie低版本坑的不轻,废话不多说,先来介绍一下,ie11中出现的奇葩现象
    2 当你用vue加axios,发请求,请求后端接口更新数据,实现视图同步更新,这个操作在ie本地,谷歌以及360等浏览器是没有问题的,但是鄙人发现,一旦你把项目打包后,发到服务器上在ie上访问,就会发现,你用axios发请求,更新页面的列表数据,当你删除列表中的一个数据后,肯定还需要调用相同的接口,用来更新删除后的列表,从而让视图更新,结果你会发现,ie上是不会更新删除后的数据列表的,这个问题,就是ie浏览器的一种机制导致的,ie浏览器会对相同请求的ajax,进行缓存,当你删除数据后,在调用同样的接口,ie不会刷新,只会把第一次请求该接口的数据拿出来,所以,你看到的页面永远都是第一次请求的ajax返回的数据
    3 解决办法:

    image.png

    打开ie调试页面,你会发现,'始终从服务器刷新'打开了,这就是为什么打开调试,页面就能同步更新数据,此时我们把始终从服务器刷新去掉,切换到网络,查看接口的请求的状态,当你删除一个数据后,同样的接口就会出现一个状态码304,百度了一下,304表示的是 ' 只读/无变化 Not Modified ',这就是问题的原因所在,所以我们要解决问题,就需要让ie每次请求接口,都要它认定这个不是同一个接口,那么下面的方法,比较简单的解决了这个问题


    image.png

    是的,给每个接口在请求的时候加上时间戳,这样 每次请求接口都是当前时间的最新时间,从而骗取ie的请求,达到解决问题的效果

    相关文章

      网友评论

          本文标题:解决vue在IE中,数据不同步,视图不更新,打开ie调试时数据数

          本文链接:https://www.haomeiwen.com/subject/totjtctx.html