// 由于需求關(guān)系 有很多個文本需要一起逐字輸出 所以這里就采用了Promise.all的形式
async getThreeTextarea() {
    let taskArray = [ "重點項目文本","應(yīng)用領(lǐng)域文本", "用途文本","成果需求文本", "問題描述","建議描述",]
    await Promise.all(taskArray.map((task, index) => {
        // 這里調(diào)取接口
        const promise = this.getContentThree(this.orderId, task, index);
        // 這里是為取消行為做準(zhǔn)備
        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>標(biāo)簽
    let formattedData = response.data.replace(/\n\n/g, '<br>').replace(/\n/g, '<br>');
    // 賦值給對應(yīng)的字段
    let contentLabels = ['zdxmycText', 'yylyycText', 'ytycText', 'cgxqycText', 'wtzjText', 'jyzjText']
    let contentProperty = contentLabels[index]
    if (!contentProperty) return
    // 這里就開始調(diào)用 逐字輸出的方法啦
    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 = '正在關(guān)閉頁面，未完成的操作將被取消。';
    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();
    // 監(jiān)聽是否要取消操作
    window.addEventListener('beforeunload', this.handleBeforeUnload.bind(this));
}
this.streamCancellationToken = false;

// 在頁面銷毀的時候 取消監(jiān)聽
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();
    }
});