关于后端进度条的实现

java代码部分

1
2
3
4
5
6
7
8
9

for (int i =0;i<10;i++) {
    try {
        TimeUnit.SECONDS.sleep(1);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
    writer.print(i);
    writer.flush();
}

重点写一个trunk后要及时flush

js部分

得益于fetch api中关于getReader的能力 可以让我们及时读取每个分片（trunk）的数据

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

fetch(require.toUrl("$UI/demo/mock.j")).then(function (response) {
    let reader = response.body.getReader();
    let decoder = new TextDecoder();
    return readData();
    function readData() {
        return reader.read().then(function (data) {
            var value = data.value,done = data.done;
            value = new TextDecoder("utf-8").decode(value);
            console.log(value);
            if (done) {
                console.log('Stream complete');
                return;
            }
            return readData();
        });
    }
});

效果如下：