Parallelisierung verhindern

[Felix Riesterer]

Liebe Mitlesende,

ich habe für mein Projekt einen Uploader gebaut, der im Prinzip das umsetzt, was mein Artikel zu segmentierten Uploads beschreibt. Damit die Segmente in der richtigen Reihenfolge hochgeladen werden können, verwende ich eine Funktion, die sich immer wieder selbst aufruft, wenn ein weiteres Segment übertragen werden muss:

const
  chunkSize = 2*1000*1000, // 2MB
  chunks = chunks = Math.ceil(myFile.size / chunkSize);

let chunk = 0;

const uploader = () => {
  ... // formData befüllen
  fetch(
    myURL,
    { method: "POST", body: formData }
  )
  .then(response => response.json())
  .then(data => {
    if ("error" in data) {
      handleError(data.error);
    } else {
      chunk++;
      if (chunk < chunks) {
        uploader();
      }
    }
  })
  .catch(error => {
    //
  });
};

uploader();

Jetzt habe ich das Problem, dass ich eine Liste an Dateien übertragen möchte. Mein erster Versuch war der, die Liste in einer Schleife abzuarbeiten. Das Ergebnis ist, dass die uploader()-Aufrufe nicht in der richtigen Reihenfolge angestoßen werden. Bei Dateien, die in nur einem Segment übertragen werden können, stört das nicht, aber bei Dateien, die in mehreren Segmenten übertragen werden, stört das sehr wohl, weil das Backend für jeden User nur eine temporäre Datei anbietet, in der die Segmente gesammelt werden.

Frage: Wie kann ich es erreichen, dass eine Datei erst übertragen wird, wenn eine andere definitiv (also auch mit egal wievielen Segmenten) komplett übertragen worden ist? Muss ich mir da ein Event bauen, das mein Uploader sendet, wenn er fertig ist, damit ein passender EventHandler dann die nächste Datei abarbeitet? Oder gibt es da eine Lösung mit Promises?

Was würdet ihr empfehlen?

Liebe Grüße

Felix Riesterer

[Ryuno-Ki]

Moin Felix,

Oder gibt es da eine Lösung mit Promises?

Was würdet ihr empfehlen?

In der Vergangenheit bin ich da mit Array.prototype.reduce eigentlich ganz gut gefahren.

Alex MacArthur hat da etwas aufgeschrieben.

Kannst du deine Segmente entsprechend gestalten?

Das Entwurfsmuster wird gerne Wasserfall genannt: https://github.com/dotSlashLu/promise-waterfall

Gruß,

[Felix Riesterer]

Lieber Ryuno-Ki,

In der Vergangenheit bin ich da mit Array.prototype.reduce eigentlich ganz gut gefahren.

ja, das ist eine der Methoden, die ich bisher nur dem Namen nach kenne und die ich in meinen Projekten so noch nie eingesetzt habe. Prinzipiell weiß ich, was sie tut.

Alex MacArthur hat da etwas aufgeschrieben.

Oha, eine wirklich steile Lernkurve für mich. Aber es sieht so aus, als würde sie mein Problem so elegant lösen, wie ich mir erhoffe. Muss ich also ausprobieren. Hatte ja schon den Verdacht, dass ich Promises benötigen würde, und mit Array.reduce() scheint das der Weg zu sein.

Kannst du deine Segmente entsprechend gestalten?

Verstehe nicht, was Du meinst. Inwiefern gestalten?

Das Entwurfsmuster wird gerne Wasserfall genannt: https://github.com/dotSlashLu/promise-waterfall

Oh, schon wieder npm. Das meide ich wie der Teufel das Weihwasser. Aber in der Datei index.js wird in Zeile 23 list.reduce(function(l, r){...} verwendet, das dem entspricht, was Alex MacArthur in seinem Artikel beschreibt. Folgt also prinzipiell der gleichen Idee. Wenn das Wasserfall genannt wird, dann ist ein Wasserfall wohl meine Lösung.

Herzlichen Dank für Deine Hilfe! Wenn ich es getestet habe und es passt, mache ich Deine Antwort zu einer aktzeptierten Antwort.

Liebe Grüße

Felix Riesterer

[Ryuno-Ki]

Moin Felix,

Kannst du deine Segmente entsprechend gestalten?

Verstehe nicht, was Du meinst. Inwiefern gestalten?

Kannst du dir ein Array bauen oder brauchst du zwingend eine for-Schleife?

Das Entwurfsmuster wird gerne Wasserfall genannt: https://github.com/dotSlashLu/promise-waterfall

Oh, schon wieder npm. Das meide ich wie der Teufel das Weihwasser.

Viele Pakete von npm sind quelloffen. Eine der Freiheiten ist das studieren von offener Software. Du musst es dann nicht als Abhängigkeit einbinden, wenn du dich damit aufschlauen konntest (ich kommentiere aber regelmäßig, von wo ich etwas gelernt habe).

Herzlichen Dank für Deine Hilfe! Wenn ich es getestet habe und es passt, mache ich Deine Antwort zu einer aktzeptierten Antwort.

Falls das nicht tut, überlegen wir uns etwas anderes.

Gruß,

[Felix Riesterer]

Lieber Ryuno-Ki,

Kannst du dir ein Array bauen oder brauchst du zwingend eine for-Schleife?

ich mache mir mit Array.from(fileInput.files) ein Array, welches ich dann mittels reduce() auf die vorgeschlagene Art abarbeiten lasse.

(ich kommentiere aber regelmäßig, von wo ich etwas gelernt habe).

Ja, das tue ich auch. Aktuell habe ich die URL zu MacArthurs Artikel in meinem Quelltext an der entsprechenden Stelle hinterlegt. War ja nicht meine Idee, sondern seine. Und Du hast sie mir vermittelt.

Falls das nicht tut, überlegen wir uns etwas anderes.

Es hat getan. Auf Anhieb! Bin total begeistert! Nochmals vielen herzlichen Dank!

Liebe Grüße

Felix Riesterer

[MudGuard]

Hi,

const
  chunkSize = 2*1000*1000, // 2MB
  chunks = chunks = Math.ceil(myFile.size / chunkSize);

Frage: was hat es mit dem zweifachen chunks = auf sich?
Wozu die doppelte Zuweisung?

cu,
Andreas a/k/a MudGuard

[Felix Riesterer]

Lieber MudGuard,

  chunks = chunks = Math.ceil(myFile.size / chunkSize);

bad copy pasta 😉

Liebe Grüße

Felix Riesterer