利用Spring的@Async异步处理改善web应用中耗时操作的用户体验

Web应用中,有时会遇到一些耗时很长的操作(比如:在后台生成100张报表再呈现,或 从ftp下载若干文件,综合处理后再返回给页面下载),用户在网页上点完按钮后,通常会遇到二个问题:页面超时、看不到处理进度。

对于超时,采用异步操作,可以很好的解决这个问题,后台服务收到请求后,执行异步方法不会阻塞线程,因此就不存在超时问题。但是异步处理的进度用户也需要知道,否则不知道后台的异步处理何时完成,用户无法决定接下来应该继续等候? or 关掉页面?

思路:

1、browser -> Spring-MVC Controller -> call 后台服务中的异步方法 -> 将执行进度更新到redis缓存 -> 返回view

2、返回的view页面上,ajax -> 轮询 call 后台服务 -> 查询redis中的进度缓存数据,并实时更新UI进度显示 -> 如果完成 call 后台服务清理缓存

注:这里采用了redis保存异步处理的执行进度,也可以换成session或cookie来保存。

步骤:

一、spring配置文件中,增加Task支持

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <beans xmlns="http://www.springframework.org/schema/beans"
 3        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 4        xmlns:task="http://www.springframework.org/schema/task"
 5        xsi:schemaLocation="http://www.springframework.org/schema/beans
 6        http://www.springframework.org/schema/beans/spring-beans.xsd
 7        http://www.springframework.org/schema/task
 8        http://www.springframework.org/schema/task/spring-task.xsd">
 9 
10 
11 
12     <!-- 支持异步方法执行 -->
13     <task:annotation-driven/>
14 
15 </beans>

二、后台Service中,在方法前加上@Async

先定义服务接口:

 1 package ctas.web.service;
 2 
 3 public interface AsyncService {
 4 
 5     /**
 6      * 异步执行耗时较长的操作
 7      *
 8      * @param cacheKey
 9      * @throws Exception
10      */
11     void asyncMethod(String cacheKey) throws Exception;
12 
13     /**
14      * 获取执行进度
15      *
16      * @param cacheKey
17      * @return
18      * @throws Exception
19      */
20     String getProcess(String cacheKey) throws Exception;
21 
22     /**
23      * 执行完成后,清除缓存
24      *
25      * @param cacheKey
26      * @throws Exception
27      */
28     void clearCache(String cacheKey) throws Exception;
29 }

服务实现:

 1 package ctas.web.service.impl;
 2 import ctas.web.service.AsyncService;
 3 import org.springframework.beans.factory.annotation.Autowired;
 4 import org.springframework.data.redis.core.StringRedisTemplate;
 5 import org.springframework.scheduling.annotation.Async;
 6 import org.springframework.stereotype.Service;
 7 
 8 @Service("asyncService")
 9 public class AsyncServiceImpl extends BaseServiceImpl implements AsyncService {
10 
11     @Autowired
12     StringRedisTemplate stringRedisTemplate;
13 
14 
15     @Override
16     @Async
17     public void asyncMethod(String cacheKey) throws Exception {
18         //模拟总有20个步骤,每个步骤耗时2秒
19         int maxStep = 20;
20         for (int i = 0; i < maxStep; i++) {
21             Thread.sleep(2000);
22             //将执行进度放入缓存
23             stringRedisTemplate.opsForValue().set(cacheKey, (i + 1) + "/" + maxStep);
24         }
25     }
26 
27     @Override
28     public String getProcess(String cacheKey) throws Exception {
29         return stringRedisTemplate.opsForValue().get(cacheKey);
30     }
31 
32     @Override
33     public void clearCache(String cacheKey) throws Exception {
34         //完成后,清空缓存
35         stringRedisTemplate.delete(cacheKey);
36     }
37 
38 
39 }

注意:asyncMethod方法前面的@Async注解,这里模拟了一个耗时的操作,并假设要完成该操作,共需要20个小步骤,每执行完一个步骤,将进度更新到redis缓存中。

三、Controller的处理

 1     @RequestMapping(value = "async/{key}")
 2     public String asyncTest(HttpServletRequest req,
 3                             HttpServletResponse resp, @PathVariable String key) throws Exception {
 4         asyncService.asyncMethod(key);
 5         return "common/async";
 6     }
 7 
 8     @RequestMapping(value = "async/{key}/status")
 9     public String showAsyncStatus(HttpServletRequest req,
10                                   HttpServletResponse resp, @PathVariable String key) throws Exception {
11         String status = asyncService.getProcess(key);
12         ResponseUtil.OutputJson(resp, "{\"status\":\"" + status + "\"}");
13         return null;
14     }
15 
16     @RequestMapping(value = "async/{key}/clear")
17     public String clearAsyncStatus(HttpServletRequest req,
18                                    HttpServletResponse resp, @PathVariable String key) throws Exception {
19         asyncService.clearCache(key);
20         ResponseUtil.OutputJson(resp, "{\"status\":\"ok\"}");
21         return null;
22     }

四、view上的ajax处理

 1 <script type="text/javascript" language="JavaScript">
 2 
 3     var timerId = null;//定时器ID
 4 
 5     $(document).ready(function () {
 6 
 7         /*
 8          定时轮询执行进度
 9          */
10         timerId = setInterval(function () {
11             getStatus();
12         }, 1000);
13         getStatus();
14     });
15 
16     /**
17      获取执行进度
18      */
19     function getStatus() {
20         var statusUrl = window.location.href + "/status";
21         $.get(statusUrl, function (data) {
22             if (data == null || data.status == null || data.status == "null") {
23                 updateStatus("准备中");
24                 return;
25             }
26             var status = data.status;
27             updateStatus(status);
28             var temp = status.split("/");
29             if (temp[0] == temp[1]) {
30                 updateStatus("完成");
31                 clearInterval(timerId);//停止定时器
32                 clearStatus();//清理redis缓存
33             }
34         })
35     }
36 
37     /**
38      * 执行完成后,清理缓存
39      */
40     function clearStatus() {
41         var clearStatusUrl = window.location.href + "/clear";
42         $.get(clearStatusUrl, function (data) {
43             //alert(data.status);
44         })
45     }
46 
47     /**
48      更新进度显示
49      */
50     function updateStatus(msg) {
51         $("#status").html(msg);
52     }
53 </script>
54 <div id="msgBox">
55     <span>请稍候,服务器正在处理中...</span>
56 
57     <h1>当前处理进度:<span style="color:red" id="status">准备中</span></h1>
58 </div>

浏览 http://localhost:8080/xxx/async/123123后的效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程之旅

CocoaPods导入的库其头文件导入的方法以及Pch预编译文件配置

尽管CocoaPods使用十分方便,但其导入的第三方框架还是要经过几步操作,才能供项目使用

891
来自专栏java闲聊

SpringBoot+Vue2.x登陆功能

2844
来自专栏科技前线

升级Bash修复Shellshock漏洞

Shellshock,又称Bashdoor,是一个安全漏洞,于2014年9月12日被发现,直到9月24日被赋予了CVE编号CVE-2014-6271才得以控制。...

1362
来自专栏自由而无用的灵魂的碎碎念

查看服务时提示“一个或多个ActiveX控件无法显示”的解决方法

一个或多个ActiveX控件无法显示,原因可能是下列其中之一: 1)当前安全设置禁止运行此页面中的ActiveX控件,或 2)您已经阻止了其中一个...

1253
来自专栏偏前端工程师的驿站

.Net魔法堂:史上最全的ActiveX开发教程——自动更新、卸载篇

一、前言                               B/S模式的特点之一,客户端版本升级相对简单、快捷,适合产品的快速迭代。而ActiveX组...

1878
来自专栏游戏杂谈

基于Node.js的Web Socket

以前看到过很多关于node.js的文章,但一直没有尝试去搭建node.js的环境。这里有一篇文章叫“websocket与node.js的完美结合”

1272
来自专栏向治洪

React native开发中常见的错误

react native环境搭建请移步:react native环境搭建 这里说说react native创建完成之后,运行中出现的常见问题, 问题1: jav...

2976
来自专栏静默虚空的博客

Webpack 资源管理

资源管理 ? 提示: 1、版本问题 本文基于 webpack 2.x 版本。webpack 2.x 相比 webpack 1.x 有重大改变。所以,如果你的...

2127
来自专栏Golang语言社区

golang使用protobuf

为什么要使用protobuf 最近的项目中,一直使用Json做数据传输。Json用起来的确很方便。但相对于protobuf数据量更大些。做一个移动端应用,为用户...

6115
来自专栏企鹅号快讯

如何用 Karma,Jasmine,Webpack 测试 UI 组件系列(一)配置篇

如何用 Karma,Jasmine,Webpack 测试 UI 组件系列 (一) 配置篇为什么要测试 从个人经验来看,测试是防止软件缺陷的最好方法。 生产开发中...

38215

扫码关注云+社区