Vue js отправляет данные порциями

#javascript #vue.js #asynchronous #async-await

#javascript #vue.js #асинхронный #асинхронный -ожидание

Вопрос:

Я хотел бы отправлять данные порциями, теперь то, что я отправляю на сервер, выглядит следующим образом для цикла — 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);
                        }
                        else{
                            callStoreCouunt =1;
                            console.log(chunk, "res"   callStoreCouunt)
                            debugger
                            if(callStoreCouunt === startCount){
        
                                let commitPackage = {
                                    transaction: {
                                        documentId: {value: uploadPackage.transaction.documentId.value},
                                        transactionId: uploadPackage.transaction.transactionId,
                                        fileGuid: uploadPackage.transaction.fileGuid
                                    }
                                };
                              debugger
                                component.commitUpload(commitPackage);
                            }
                        }
                        });
                    }
 

Ответ №1:

Вы не можете контролировать, какой фрагмент данных попадает на сервер первым. Если где-то на пути возникает проблема с сетью, она может обойти планету несколько раз, прежде чем достигнет сервера.

Даже если 1-й фрагмент был отправлен 5 ms раньше, чем 2-й, 2-й фрагмент может попасть на сервер раньше.

Но есть несколько способов решить эту проблему:

Способ 1:

Дождитесь ответа сервера перед отправкой следующего фрагмента:

 let state = {
  isPaused: false
}
let sentChunks = 0
let totalChunks = getTotalChunksAmount()
let chunkToSend = ...

setInterval(() => {
  if (!isPaused amp;amp; sentChunks < totalChunks) {
    state.isPaused = true
    send(chunkToSend)
    sentChunks  = 1
  }
}, 100)

onServerReachListener(response => {
  if (response === ...) {
    state.isPaused = false
  }
})
 

Способ 2:

Если вам не нужно обрабатывать блоки последовательно в режиме реального времени, вы можете просто подождать, пока все они поступят на сервер, а затем отсортировать их перед обработкой:

 let chunks = []
onChunkReceived (chunk) {
  if (chunk.isLast) {
    chunks.push(chunk)
    chunks.sort()
    processChunks()  
  }
  else {
    chunks.push(chunk)
  }
}
 

Способ 3:

Если вам нужно обрабатывать блоки последовательно в режиме реального времени, присвойте всем блокам свойство id и обрабатывайте их последовательно, сохраняя остальные на потом:

 let chunksToProcess = []
let lastProcessedChunkId = -1 
 
onChunkReceived (chunk) {
  if (chunk.id === lastProcessedChunkId) { 
    processChunk()
    lastProcessedChunkId  = 1
    processStoredChunks()
  }
  else {
    chunksToProcess.push(chunk)
  }
}