javascript fetch - Welche Einschränkungen gelten für opake Antworten?




api example (2)

Undurchsichtige Antworten werden als Teil der Fetch-API definiert und stellen das Ergebnis einer Anfrage dar, die an einen Remote-Ursprung CORS wenn CORS nicht aktiviert ist.

Welche praktischen Einschränkungen und "Gotchas" gibt es in Bezug darauf, wie undurchsichtige Antworten sowohl von JavaScript als auch von Ressourcen auf einer Seite verwendet werden können?


Answers

Zugang zu den Kopfzeilen / Körper der opaken Antworten

Die einfachste Einschränkung bei undurchsichtigen Antworten besteht darin, dass Sie von den meisten properties der Antwortklasse keine sinnvollen Informationen wie headers abrufen können oder die verschiedenen methods , die das Body Interface bilden, wie json() oder text() aufrufen. Dies entspricht der Black-Box-Natur einer opaken Antwort.

Verwenden opaker Antworten als Ressourcen auf einer Seite

Undurchsichtige Antworten können als Ressource auf einer Webseite verwendet werden, wenn der Browser die Verwendung einer Cross-Origin-Ressource ermöglicht, die nicht von CORS stammt. Hier ist eine Teilmenge von Elementen, für die nicht-CORS-Ursprungsressourcen und damit undurchsichtige Antworten gültig sind und die aus der Mozilla Developer Network-Dokumentation übernommen wurden :

  • <script>
  • <link rel="stylesheet">
  • <img> , <video> und <audio>
  • <object> und <embed>
  • <iframe>

Ein bemerkenswerter Anwendungsfall, für den undurchsichtige Antworten nicht gültig sind, sind Font-Ressourcen .

Um zu ermitteln, ob Sie eine undurchsichtige Antwort als bestimmten Ressourcentyp auf einer Seite verwenden können, überprüfen Sie im Allgemeinen die relevante Spezifikation. Zum Beispiel erklärt die HTML-Spezifikation, dass nicht-CORS-Ursprungs-Antworten (dh undurchsichtige Antworten) für <script> -Elemente verwendet werden können, allerdings mit einigen Einschränkungen, um auslaufende Fehlerinformationen zu verhindern.

Undurchsichtige Antworten und die Cache-Speicher-API

Ein "GOTCHA", mit dem der Entwickler möglicherweise undurchsichtige Antworten erhält, schließt deren Verwendung mit der Cache-Speicher-API ein . Zwei Hintergrundinformationen sind relevant:

  • Die Eigenschaft status einer opaken Antwort wird immer auf 0 , unabhängig davon, ob die ursprüngliche Anforderung erfolgreich war oder fehlgeschlagen ist.
  • Die add() / addAll() -Methoden der Cache-Speicher-API lehnen beide ab, wenn die aus einer der Anforderungen resultierenden Antworten einen Statuscode haben, der nicht im 2XX-Bereich liegt .

Aus diesen beiden Punkten ergibt sich, dass, wenn die als Teil des Aufrufs add() / addAll() zu einer opaken Antwort führt, sie nicht zum Cache hinzugefügt werden kann.

Sie können dies umgehen, indem Sie explizit fetch() ausführen und dann die Methode put() mit der opaken Antwort aufrufen. Wenn Sie dies tun, entscheiden Sie sich effektiv für das Risiko, dass die Antwort, die Sie zwischenspeichern, ein Fehler war, der von Ihrem Server zurückgegeben wurde.

const request = new Request('https://third-party-no-cors.com/', {mode: 'no-cors'});
// Assume `cache` is an open instance of the Cache class.
fetch(request).then(response => cache.put(request, response));

Undurchsichtige Antworten und die navigator.storage API

Um das Lecken von domänenübergreifenden Informationen zu vermeiden, wird der Größe einer opaken Antwort, die zur Berechnung von Speicherkontingentlimits verwendet wird (z. B. ob eine QuotaExceeded Ausnahme ausgelöst wird), signifikante Auffüllung hinzugefügt und von der navigator.storage API gemeldet.

Die Details dieser Auffüllung variieren von Browser zu Browser, aber für Google Chrome bedeutet dies, dass die minimale Größe, die jede einzelne gecachte undurchsichtige Antwort zur Gesamtspeicherauslastung beiträgt, ungefähr 7 Megabyte beträgt. Sie sollten dies im Hinterkopf behalten, wenn Sie ermitteln, wie viele undurchsichtige Antworten Sie zwischenspeichern möchten, da Sie die Speicherkontingentbeschränkungen aufgrund der tatsächlichen Größe der undurchsichtigen Ressourcen möglicherweise viel früher überschreiten würden, als Sie normalerweise erwarten würden.


Die if und while Aussagen und die ? Operator verwendet Wahrheitswerte, um zu bestimmen, welcher Codezweig ausgeführt werden soll. Beispielsweise sind Null- und NaN-Nummern und die leere Zeichenfolge falsch, andere Zahlen und Zeichenfolgen sind jedoch wahr. Objekte sind wahr, aber der undefinierte Wert und null sind beide falsch.

Der doppelte Negationsoperator !! berechnet den Wahrheitswert eines Werts. Es sind zwei Operatoren, wobei !!x !(!x) und sich wie folgt verhält:

  • Wenn x ein falscher Wert ist, ist !x true und !!x ist false .
  • Wenn x ein wahrer Wert ist, ist !x false und !!x ist true .

Bei Verwendung auf der obersten Ebene eines booleschen Kontextes ( if , while oder ? ) if der !! Operator ist verhaltensmäßig ein No-Op. Zum Beispiel, if (x) und if (!!x) dasselbe bedeuten.

Praktische Anwendungen

Es hat jedoch mehrere praktische Anwendungen.

Eine Verwendung ist das verlustbehaftete Komprimieren eines Objekts auf seinen Wahrheitswert, sodass der Code keinen Verweis auf ein großes Objekt enthält und es am Leben erhält. Durch das Zuweisen von !!some_big_object zu einer Variablen anstelle von some_big_object es für den Garbage-Collector some_big_object . Dies ist nützlich in Fällen, in denen entweder ein Objekt oder ein falscher Wert erzeugt wird, z. B. null oder der nicht definierte Wert, z. B. die Erkennung von Browserfunktionen.

Eine andere Verwendung, die ich in einer Antwort über die Entsprechung von C erwähnt habe !! Operator , ist mit "Flusen" Tools, die nach gängigen Tippfehlern und Druckdiagnose suchen. In C und in JavaScript führen beispielsweise einige häufige Tippfehler für boolesche Operationen zu anderen Verhalten, deren Ausgabe nicht ganz so boolesch ist:

  • if (a = b) eine Zuordnung ist, gefolgt von der Verwendung des Wahrheitswerts von b ; if (a == b) ist ein Gleichheitsvergleich.
  • if (a & b) ist ein bitweises AND; if (a && b) ist ein logisches AND. 2 & 5 ist 0 (ein falscher Wert); 2 && 5 ist wahr.

Die !! Der Bediener versichert dem Fusselwerkzeug, dass das, was Sie geschrieben haben, das war, was Sie meinten: Führen Sie diesen Vorgang aus, und nehmen Sie dann den Wahrheitswert des Ergebnisses.

Eine dritte Anwendung ist die Erzeugung von logischem XOR und logischem XNOR. Sowohl in C als auch in JavaScript führt a && b ein logisches AND aus (true, wenn beide Seiten wahr sind), und a & b führt ein bitweises AND aus. a || b a || b führt ein logisches ODER aus (wahr, wenn mindestens eins wahr ist) und a | b a | b führt ein bitweises ODER aus. Es gibt ein bitweises XOR (exklusives OR) als a ^ b , aber es gibt keinen integrierten Operator für logisches XOR (true, wenn genau eine Seite wahr ist). Möglicherweise möchten Sie dem Benutzer beispielsweise erlauben, Text in genau einem von zwei Feldern einzugeben. Was Sie tun können, ist, jeden in einen Wahrheitswert umzuwandeln und zu vergleichen: !!x !== !!y .





javascript cors service-worker fetch-api