Abrufen von Text aus dem Fetch-Response-Objekt

Ich benutze fetch um API-Aufrufe zu machen und alles funktioniert, aber in diesem speziellen Fall stoße ich auf ein Problem, weil die API einfach eine Zeichenfolge zurückgibt – kein Objekt.

Normalerweise gibt die API ein Objekt zurück und ich kann das JSON-Objekt parsen und das bekommen, was ich will, aber in diesem Fall habe ich Probleme, den Text zu finden, den ich von der API im Antwortobjekt bekomme.

So sieht das Antwortobjekt aus.

Ich dachte, ich würde den Text im Körper finden, aber ich kann ihn anscheinend nicht finden. Wo suche ich?

Mit der Abruf-JavaScript-API können Sie Folgendes versuchen:

response.text().then(function (text) {
  // do something with the text response 
});

Werfen Sie auch einen Blick auf die Dokumente auf bringen > Antwort > Body-Interface-Methoden

ES6-Syntax:

fetch("URL")
   .then(response => response.text())
   .then((response) => {
       console.log(response)
   })
   .catch(err => console.log(err))

Sie können dies auf zwei verschiedene Arten tun:

1. Die erste Option ist die Verwendung von response.text() Methode, aber beachten Sie, dass ab Dezember 2019 seine weltweite Nutzung beträgt nur 36,71 %:

   async function fetchTest() {
       let response = await fetch('https://httpbin.org/encoding/utf8');
       let responseText = await response.text();
   
       document.getElementById('result').innerHTML = responseText;
   }
   
   (async() => {
       await fetchTest();
   })();

   <div id="result"></div>

2. Die zweite Möglichkeit ist die Verwendung von response.body Eigentum statt, was aber etwas mehr Arbeit erfordert 73,94 % der weltweiten Nutzung:

   async function fetchTest() {
       let response = await fetch('https://httpbin.org/encoding/utf8');
       let responseText = await getTextFromStream(response.body);
       
       document.getElementById('result').innerHTML = responseText;
   }
   
   async function getTextFromStream(readableStream) {
       let reader = readableStream.getReader();
       let utf8Decoder = new TextDecoder();
       let nextChunk;
       
       let resultStr="";
       
       while (!(nextChunk = await reader.read()).done) {
           let partialData = nextChunk.value;
           resultStr += utf8Decoder.decode(partialData);
       }
       
       return resultStr;
   }
   
   (async() => {
       await fetchTest();
   })();

   <div id="result"></div>