async und await in Javascript

haglo · 19. Januar 2021

Hallo, ich will eine HTML-Datei laden und dann via Javascript anzeigen.

Mein Code hierzu lautet

Code

import { html } from "../lit-html/lit-html.js";
export default class AdminView extends Custom {
    constructor() {
        super();
    }
    connectedCallback() {
        this.viewChanged();
    }

    createView() {
        const content = this.loadText().then((filecontent) => {
            return filecontent;
        });
        return html`${content.text}`;
    }

    async loadText() {
        const text = await fetch('/views/admin.html');
        return text;
    }
}

Alles anzeigen

Beim Aufruf von AdminView.createView()... erzeugt folgender Code eine Meldung: Promise pending

Code

const content = this.loadText().then((filecontent) => {return filecontent;});

Weiß jemand wie ich das fixen kann?

AndreasB · 19. Januar 2021

Hallo halgo,

bei dir geht das mit dem asynchronen und dem synchronen ziemlich durcheinander.

JavaScript

/* ... */
createView() {
    const content = this.loadText().then((filecontent) => {
        return filecontent;
    });

    // Hier liegt das Problem
    return html`${content.text}`;
}
/* ... */

Hier hast du ein Timing Problem. Zu dem Zeitpunkt, an dem du von der Funktion returnst, ist das Promise. noch nicht fulfilled.

Daher bekommst du ein Pending Promise.

Schau' dir mal das an:

Making asynchronous programming easier with async and await (mdn)

Ein Tip für den Anfang:

entscheide dich für ENTWEDER async / await ODER then / catch / finally

nicht für beides gleichzeitig.

async und await in Javascript

Jetzt mitmachen!

Teilen