Vue js 按块发送数据

Question

我想按块发送数据，现在我发送到服务器的数据看起来像这样 for 循环 - 1, 2, 3 服务器接收的内容：3,1,2 -> 异步。我需要同步发送它，以便服务器将接收我的 for 循环顺序：1,2,3 我该怎么做？//52428800                const chunkSize = 1377628                let beginUpload = data;                let component = this;                let start = 0;                let startCount = 0;                let callStoreCouunt = 0;                                for (start; start < zipedFile.length; start += chunkSize) {                    const chunk = zipedFile.slice(start, start + chunkSize + 1)                    startCount +=1;                        // debugger                        // var base64Image = new Buffer( zipedFile ).toString('base64');                        var base64Image = new Buffer( chunk ).toString('base64');                        console.log(chunk, startCount);                    let uploadPackage: documentInterfaces.UploadPackage = {                        transaction: {                            documentId: {value: data.documentId.value},                            transactionId: data.transactionId,                            fileGuid: data.fileGuid                        },                        packageBuffer: base64Image                    };                    // debugger                                        component.$store.dispatch('documents/uploadPackage', uploadPackage)                    .then(({ data, status }: { data: documentInterfaces.ReciveAttachScene , status: number }) => {                        // debugger                        if(status !== 200){                            component.$message({                                message: data,                                type: "error"                            });                            component.rejectUpload(beginUpload);                        }

Answer 1

您无法控制哪个数据块首先到达服务器。如果途中某个地方出现网络问题，它可能会绕地球多次才能到达服务器。

即使第一个块早于第二个块发送5 ms，第二个块也可能会更早到达服务器。

但有几种方法可以解决这个问题：

方法一：

在发送下一个块之前等待服务器响应：

let state = {

  isPaused: false

}

let sentChunks = 0

let totalChunks = getTotalChunksAmount()

let chunkToSend = ...

setInterval(() => {

  if (!isPaused && sentChunks < totalChunks) {

    state.isPaused = true

    send(chunkToSend)

    sentChunks += 1

  }

}, 100)

onServerReachListener(response => {

  if (response === ...) {

    state.isPaused = false

  }

})

方法二：

如果你不需要实时顺序处理块，你可以等待它们全部到达服务器，然后在处理之前对它们进行排序：

let chunks = []

onChunkReceived (chunk) {

  if (chunk.isLast) {

    chunks.push(chunk)

    chunks.sort()

    processChunks()  

  }

  else {

    chunks.push(chunk)

  }

}

方法三：

如果您确实需要实时按顺序处理块，请为所有块指定 id 属性并按顺序处理它们，同时存储其他块供以后使用：

let chunksToProcess = []

let lastProcessedChunkId = -1 

 

onChunkReceived (chunk) {

  if (chunk.id === lastProcessedChunkId) { 

    processChunk()

    lastProcessedChunkId += 1

    processStoredChunks()

  }

  else {

    chunksToProcess.push(chunk)

  }

}