从获取响应对象获取文本

Question

我正在使用

fetch

进行 API 调用，一切正常，但在这个特定的实例中，我遇到了一个问题，因为 API 只是返回一个字符串——而不是一个对象。

通常，API 返回一个对象，我可以解析 JSON 对象并获取我想要的内容，但在这种情况下，我无法在响应对象中找到从 API 获取的文本。

响应对象如下所示。

我以为我会在正文中找到文字，但我似乎找不到它。我在哪里看？

Answer 1

您可以尝试使用 fetch JavaScript API：

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

另请查看有关 fetch > response > body 接口方法

的文档

Answer 2

ES6 语法：

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

Answer 3

您可以通过两种不同的方式执行此操作：

1. 第一个选项是使用

   response.text()

   方法：(caniuse, mdn)

   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. 第二种选择是使用

   response.body

   属性，这需要更多的工作：(caniuse, mdn)

   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>