Hallo Samuel fiedler,

wenn Du nur ein einziges Element hast, das Du befüllen willst, geht das sicherlich.

Die einfachste Version davon sähe wohl so aus:

async function loadComponent(element, url) {
   const response = await fetch(url);
   if (!response.ok)
      throw new TypeError("Kann " + url + " nicht laden");
   element.innerHTML = await.response.text();
   return element;
}

...

loadComponent(document.getElementById("header"), "header.html");

loadComponent arbeitet asynchron - nicht wegen des async vor dem function, sondern weil fetch einfach asynchron ist. Dadurch, dass die Funktion als async markiert ist, kannst Du await verwenden, um auf die Promises von fetch zu warten. Die Rückgabe von loadComponent ist - wegen des async - ebenfalls ein Promise.

Fall 1: Du rufst loadComponent aus einer weiteren async-Funktion auf oder aus einem type="module"-Script. Dann kannst Du den Returncode mit await erwarten. Wenn der fetch fehlschlägt oder der HTTP-Statuscode nicht im 200er Bereich liegt, fliegt in loadComponent ein Error, den Du mit einem try/catch-Block erwischen kannst.

Fall 2: Du verwendest die Promise-Methoden .then und .catch. Im Fehlerfall läufst Du dann in den Catch-Handler.

loadComponent(element, "dings.html")
.then(element => {
   // Element initialisieren, zum Beispiel
})
.catch(function(fehler) {
   // Fehler behandeln
});

Da gibt's viele mögliche Varianten.

Wenn Du aber mehrere Komponenten hast, dann solltest Du Dir etwas überlegen, wie Du mehr als ein Template auf einmal vom Server holen kannst. Du könntest 4 Templates in ein .html legen, und nach der .innerHTML Zuweisung kannst Du diese Templates dann an Hand ihrer ID finden.

Rolf