Question

我正在尝试获取页面的html（一旦可以正常工作，我将在请求的页面中获取特定的Div），然后将此页面打印到我的id="data" div中。我可以在诺言中看到信息，但是我无法访问该信息。

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://www.booking.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
  .then(response => response)
  .then(data => {
    console.log(data.text());
    return document.getElementById('data').innerHTML = data.text();
  })
  .catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));

<div id='data'></div>

Answer 1

您在响应正文上调用的.text()方法将返回一个Promise。因此，访问它的正确方法是通过Promise链。

按照documentation：

Body mixin的text（）方法获取一个Response流，并将其读取完成。它返回一个用USVString对象（文本）解析的承诺。

更新后的代码段如下所示：

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://www.booking.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
  .then(response => response.text())  
.then(html => {
  // console.log(html);
  document.getElementById('data').innerHTML = html;
})
.catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));

<html>
    <body>
       <div id='data'>
      </div>
      
    </body>
</html>

Answer 2

text()或json()只能被调用一次。在您的代码中，您两次调用它。因此，console.log为您提供了数据，下次调用data.text()时，结果为空。

您可以按照以下步骤进行操作

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://www.booking.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
  .then(response => response)
  .then(data => {
    const resData = data.text();
    console.log(resData);
    document.getElementById('data').innerHTML = resData;
  })
  .catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));

<div id="data"></div>

如何使用提取API填充DIV？

2 个答案: