之前项目有一个需求,在下载文件的时候,在向后端发出请求的这段时间要有loading动画提高交互性。

但是当时后端只能以传统的向前端发送流的形式来下载,ajax派不上用场,只能用js去模拟,但是这样就监听不到后端的返回,只能等后端将数据流发送回来,浏览器自动弹出下载提示。

想了想,只能是后端返回的时候发送一个cookie: {downloading: true},然后我前端轮询这个字段,轮询到就将loading关闭,并将这个cookie删除。理论上来说好像是没什么毛病,但实际应用起来还是有一些坑的。

踩坑完毕,记录一下。

首先遇到的第一个坑就是发现cookie删不掉。

当然,这里说明一下,并不是js或者浏览器本身的机制不允许删除cookie,只是我删除的方式不对。

一开始我只是简单的将cookie设置为空,将expires设置为-1。心里想着,已过期,cookie自动清除,美滋滋,然而事实并没有按照我想的发生。downloading还是躺在cookie里面没有任何变化,是因为没有刷新吗?于是我在后面再次获取了一下:

console.log(document.cookie);

发现cookie里面确实还是有downloading这个字段。

没办法,打开application看看,果然发现了问题,后端传递过来的这个cookie没有设置expires,但是却默认设置了path,再联想我之前删除的cookie是没有带任何参数的,结合cookie的机制,发现了问题所在。

解决办法:

在删除cookie的时候要加上这个字段所带的参数,可能是出于安全的考虑,不同的参数,即使名字相同,也会当成两个cookie存储,所以我删除的并不是后端传过来的cookie,自然就删除不了。

第二个坑,后端设置cookie默认的path属性没有规律。

出于代码复用和性能考虑,后端的很多功能都会集成到一个API,再加上前端可能会用到一些第三方的框架,这些框架所采用过的设计模式都各不相同,都会造成一些不可预测的结果,而项目有可能在任何地方都会有下载的需求,所以当我发现如何删除cookie的时候,我又发现了一个坑,那就是不知道该如何准确获取cookie的path属性。而且如果你请求的接口默认path与你所在的url不匹配的话,浏览器将会忽略这次的cookie设置,在我的项目的直接体现就是,后端响应了cookie,但是我前端接收不到,页面loading无法消失,卡死了。

解决办法:

根据cookie的机制,当cookie的path属性为'/'的时候,cookie就不会被忽略。

所以解决办法就是让后端在set-cookie的时候讲path设置成固定的'/',以java为例:

Cookie cookie = new Cookie("Downloading","true");
cookie.setPath("/");
response.addCookie(cookie);

然后前端只要在监听到downloading字段的时候,再将path='/'的downloading删除就可以了。