bug 由于浏览器缓存而引起的ajax请求并没有获取到服务器最新数据从而导致的bug

时间:2023-01-29 19:02:27

  自此之前并没有听说过ajax请求的得来的数据是浏览器的缓存给出的这一说法,由于此次bug情节十分有趣,于是记录下来。

  

    这次开发的前端框架是react, 涉及到的一共有三个页面或组件, 评价组件,分享组件, 打开链接后跳转的页面(暂且称之为外链页面)。当进入时,react会根据是否评价加载评价组件或分享组件。当开始没有评价则会加载评价组件,评价完后加载分享组件,在分享组件中点击链接会进入外链页面。但是在外链页面返回时加载了评价组件。这时问题来了:已经评价了为什么还要加载评价组件?

    调bug阶段开始:

      第一阶段:重现bug,不费丝毫力气,按照原先方式走就重现了bug。这时打开chrome调试,点开发现评价信息接口请求回来的评价信息是空的,然后我就把后端叫了过来,说你怎么没给我返回数据,然后后端感觉非常奇怪的回去调试。

      第二阶段:后端不背锅,不用多久后端告诉我,说页面返回时后端并没有受到接口调用,不要随便扔锅。

      第三阶段:还是我的锅,我再次调试,发现真的没有调用后端接口,为什么呢?我看着chrome network中的请求信息。发现了与以往不同的信息,

            评价信息接口调用的status code虽然是200 ok,但是是200 OK (from cache)。然后百度了一下,发现还是我的锅。

 

      第四阶段:解决问题,200 OK (from cache)表示着虽然调用了该接口,但浏览器并没有像后端请求数据,而是应用了上次的请求信息。(304 not             modified是向后段请求了数据,但是发现ETag并没有变化,因而数据没有改变),因而解决该问题的方法就是不让浏览器缓存请求内            容或者让浏览器不应用缓存内容,于是就用到了jquery ajax请求的cache:false,选项,cache设置成false之后,请求会添                                             加&_=1449209923560的后缀,那一长串的数字就是时间戳,从而让浏览器认为调用的同一个接口并不是相同的请求,自然就不会应用            原先的缓存数据了。自此bug调试结束。