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 das baseURI des Dokuments im Kontext eines Fensters ist, oder WorkerGlobalScope.location im Kontext eines Workers.
• Ein Request Objekt.

options Optional

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

Ein Promise, das zu einem Response Objekt aufgelöst wird.

AbortError DOMException

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

NotAllowedError DOMException

Wird ausgelöst, wenn die Nutzung der Topics API durch eine browsing-topics Berechtigungsrichtlinie ausdrücklich untersagt wird und eine fetch()-Anfrage mit browsingTopics: true gemacht 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 mithilfe des entsprechenden Konstruktors und rufen es dann mit einem fetch()-Aufruf ab. Da wir ein Bild abrufen, führen wir Response.blob() auf der Antwort aus, um ihr den richtigen MIME-Typ zuzuweisen, damit es korrekt behandelt wird, und erstellen dann eine Object-URL daraus 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 with init Beispiel (siehe Fetch Request init live) machen 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 welchen Arten 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 im init verwenden:

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

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

Der Artikel Using fetch bietet weitere Beispiele für die Verwendung von fetch().

• WorkerGlobalScope.fetch()
• Fetch API
• ServiceWorker API
• HTTP access control (CORS)
• HTTP