JavaScript – Async, Await und Promise anhand FileInput

Tutorial JavaScript

von Ardian Shala, 17.04.2017 - update: 19.05.2017
Async und Await via ECMAScript 2016 (ES7) erleichtern das Behandeln von asynchronem Code.
Hier anhand eines Beispiels mit einem Input type "file".

Achtung: Wenn man nach ES5 kompatibel sein will, muss man PolyFills nutzen.
Vorraussetzung:
  • Verständnis Promises

Downloads:

JS Fiddle Babel Beispiel

Async onload via Promise behandeln

Hier definieren wir die Funktion, welche nach dem Bestätigen eines File Inputs aufgerufen werden soll.
Diese beinhaltet das Bearbeiten des Events mit einem FileReader und soll uns das Ergebnis (hier eine Datei) mittels Promise zurückreichen.
Somit haben wir das Einlesen einer Datei schön und übersichtlich gekapselt.

function onFileUpload(input) {
    return new Promise((resolve, reject) => {
        var reader = new FileReader();
        reader.onload = resolve;
        reader.readAsDataURL(input.target.files[0]);
    });
}

Wichtig ist hier, dass „reader.onload“ das „resolve“ vom Promise aufruft.

Async Funktion „workWithFile“ definieren

Diese Funktion soll von dem File-Input aufgerufen/ausgelöst werden.
Zu beachten ist hier, dass die Funktion mit dem Attribut „async“ gekennzeichnet ist.
Dies erlaubt eine Funktion mit „await“ aufzurufen, welche einen Promise liefert.
So lässt sich onFileUpload, welche ein Promise liefert wie synchroner Code aufrufen.

async function workWithFile(input) {
    let result = await onFileUpload(input);
    let img = document.createElement("img");
    img.src = result.target.result;
    document.body.appendChild(img);
}

Definieren des File Input

<input type="file" id="inputFile">

Onchange Funktion hinzufügen

Sobald sich das Input nun ändert (wenn man eine Datei im Dialog auswählt), soll nun die Funktion „workWithFile“ aufgerufen werden.

window.onload = () => {
    document.getElementById("inputFile").onchange = workWithFile;
};

Fazit

ES7 erlaubt das nutzen von async und wait, welche das Behandeln von Promises erheblich vereinfachen und überschauberer gestalten lassen.

Autor: Ardian Shala

Ersteller der Webseite MuchaDev.
Frontend Entwickler mit Angular, Ionic und Backend Entwickler mit C#.