Window: fetch() Methode

resource

Dies definiert die Ressource, die Sie abrufen möchten. Dies kann entweder sein:

• Ein String oder ein anderes Objekt mit einem stringifier — einschließlich eines URL Objekts — das die URL der Ressource bereitstellt, die Sie abrufen möchten. Die URL kann relativ zur Basis-URL sein, die in einem Fensterkontext das baseURI des Dokuments oder WorkerGlobalScope.location in einem Worker-Kontext ist.
• Ein Request Objekt.

options Optional

Ein RequestInit Objekt, das benutzerdefinierte Einstellungen enthält, die Sie auf die Anfrage anwenden möchten.

Ein Promise, das in ein Response Objekt aufgelöst wird.

AbortError DOMException

Die Anfrage wurde abgebrochen aufgrund eines Aufrufs der AbortController abort() Methode.

NotAllowedError DOMException

Wird ausgelöst, wenn die Verwendung der Topics API ausdrücklich durch eine browsing-topics Berechtigungsrichtlinie untersagt ist und eine fetch()-Anfrage mit browsingTopics: true durchgeführt wurde.

TypeError

Kann aus folgenden Gründen auftreten:

// Leerzeichen in "C ontent-Type"
const headers = {
  'C ontent-Type': 'text/xml',
  'Breaking-Bad': '<3',
};
fetch('https://example.com/', { headers });
        

const headers = [
  ['Content-Type', 'text/html', 'extra'],
  ['Accept'],
];
fetch('https://example.com/', { headers });
        

fetch('blob://example.com/', { mode: 'cors' });
        

fetch('https://user:password@example.com/');
        

fetch('https://example.com/', { referrer: './abc\u0000df' });
        

fetch('https://example.com/', { mode: 'navigate' });
        

fetch('https://example.com/', {
  cache: 'only-if-cached',
  mode: 'no-cors',
});
        

fetch('https://example.com/', { method: 'CONNECT' });
        

fetch('https://example.com/', {
  method: 'CONNECT',
  mode: 'no-cors',
});
        

fetch('https://example.com/', {
  method: 'GET',
  body: new FormData(),
});
        

In unserem Fetch Request Beispiel (siehe Fetch Request live) erstellen wir ein neues Request Objekt mit dem entsprechenden Konstruktor und rufen es dann mit einem fetch()-Aufruf ab. Da wir ein Bild abrufen, führen wir Response.blob() aus, um den richtigen MIME-Typ zu vergeben, damit es korrekt verarbeitet wird. Anschließend erstellen wir eine Objekt-URL davon und zeigen sie in einem <img> Element an.

const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

window
  .fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

In unserem Fetch Request mit init Beispiel (siehe Fetch Request init live) tun wir dasselbe, außer dass wir ein options Objekt übergeben, wenn wir fetch() aufrufen. In diesem Fall können wir einen Cache-Control Wert festlegen, um anzugeben, mit welcher Art von zwischengespeicherten Antworten wir einverstanden sind:

const myImage = document.querySelector("img");
const reqHeaders = new Headers();

// A cached response is okay unless it's more than a week old
reqHeaders.set("Cache-Control", "max-age=604800");

const options = {
  headers: reqHeaders,
};

// Pass init as an "options" object with our headers.
const req = new Request("flowers.jpg", options);

fetch(req).then((response) => {
  // ...
});

Sie könnten das init Objekt auch mit dem Request Konstruktor übergeben, um denselben Effekt zu erzielen:

const req = new Request("flowers.jpg", options);

Sie können auch ein Objektliteral als headers in init verwenden:

const options = {
  headers: {
    "Cache-Control": "max-age=60480",
  },
};

const req = new Request("flowers.jpg", options);

• WorkerGlobalScope.fetch()
• Fetch API
• ServiceWorker API
• HTTP-Zugriffskontrolle (CORS)
• HTTP