Vue2纯前端实现文字流式输出效果

// 由于需求关系 有很多个文本需要一起逐字输出 所以这里就采用了Promise.all的形式
async getThreeTextarea() {
    let taskArray = [ "重点项目文本","应用领域文本", "用途文本","成果需求文本", "问题描述","建议描述",]
    await Promise.all(taskArray.map((task, index) => {
        // 这里调取接口
        const promise = this.getContentThree(this.orderId, task, index);
        // 这里是为取消行为做准备
        this.streamThreePromises.push(promise);
        return promise;
    }));
},
async getContentThree(id,task,index) {
    // 如果取消了 就停止请求接口
    if (!this.cancelTokenSource) return
    let response = await axios.post(`${home}/model/workflowsIndexThree`, {
        id: id,
        taskt: task,
    }, {
        // axios提供的取消请求的示例
        cancelToken: this.cancelTokenSource.token
    });
    if (typeof response.data !== 'string') return
    // 将字符串中的\n和\n\n都替换成<br>标签
    let formattedData = response.data.replace(/\n\n/g, '<br>').replace(/\n/g, '<br>');
    // 赋值给对应的字段
    let contentLabels = ['zdxmycText', 'yylyycText', 'ytycText', 'cgxqycText', 'wtzjText', 'jyzjText']
    let contentProperty = contentLabels[index]
    if (!contentProperty) return
    // 这里就开始调用 逐字输出的方法啦
    const promise = this.streamTextUpdate(contentProperty, formattedData);
    this.streamThreePromises.push(promise);
    await promise;
},
async streamTextUpdate(contentProperty, data) {
    if (typeof data !== 'string') {
        data = JSON.stringify(data) || '';
    }
    let text = "";
    // 遍历字符串 然后每加一个字符就更新一下视图
    for (let i = 0; i < data.length; i++) {
        if (this.streamCancellationToken) {
            break;
        }
        // String.charAt(index)是找到指定索引的字符 类似于Array[index]
        text += data.charAt(i);
        this.$set(this, contentProperty, text);
        await this.$nextTick();
        // 每隔50毫秒输出一个字符
        await new Promise(resolve => setTimeout(resolve, 50));
    }
},
// 提示取消操作 嫌啰嗦 其实可以不要
handleBeforeUnload(event) {
    if (this.cancelTokenSource) {
        this.cancelTokenSource.cancel('中断操作');
    }
    this.streamCancellationToken = true;
    this.streamThreePromises.forEach(promise => {
        if (promise.cancel) {
            promise.cancel();
        }
    });
    const message = '正在关闭页面，未完成的操作将被取消。';
    return this.$message.warning(message)
},

<div class="fx-content" style="height: 300px;overflow-y: auto;" v-html="zdxmycText"></div>

if (!this.cancelTokenSource) {
    // 在页面初始化的时候 就实例化一下取消请求的实例
    this.cancelTokenSource = axios.CancelToken.source();
    // 监听是否要取消操作
    window.addEventListener('beforeunload', this.handleBeforeUnload.bind(this));
}
this.streamCancellationToken = false;

// 在页面销毁的时候 取消监听
window.removeEventListener('beforeunload', this.handleBeforeUnload.bind(this));
if (this.cancelTokenSource) {
    this.cancelTokenSource.cancel('中断操作');
}
this.streamCancellationToken = true;
// 然后取消所有的promise
this.streamPromises.forEach(promise => {
    if (promise.cancel) {
        promise.cancel();
    }
});