Web应用中，有时会遇到一些耗时很长的操作（比如：在后台生成100张报表再呈现，或 从ftp下载若干文件，综合处理后再返回给页面下载），用户在网页上点完按钮后，通常会遇到二个问题：页面超时、看不到处理进度。
对于超时，采用异步操作，可以很好的解决这个问题，后台服务收到请求后，执行异步方法不会阻塞线程，因此就不存在超时问题。但是异步处理的进度用户也需要知道，否则不知道后台服务何时完成，不知道是否继续等候，还是关掉页面。
思路：
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后的效果
时间： 2025-01-05 18:26:27