从 Fetch Response 对象中获取文本

Question

我正在使用 fetch 进行 API 调用，一切正常，但在这个特定实例中，我运行遇到了问题，因为 API 只是 returns 字符串 -- 不是对象。

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

这是响应对象的样子。

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

Answer 1

使用提取 JavaScript API 你可以尝试：

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

另请查看 fetch > response > body interface methods

上的文档

Answer 2

ES6 语法：

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

Answer 3

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

第一个选项是使用response.text()方法，但要注意，在Dec/2019，its global usage is only 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>

第二个选项是使用 response.body 属性，这需要更多的工作，但有 73.94% of global usage:

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>

从 Fetch Response 对象中获取文本

Getting Text From Fetch Response Object

javascript

ajax

fetch-api