警告

Question

如何从提取响应中解析HTML页面？我已经检查了异步和常规的Promise语法，但是似乎没有任何编译：

const fetch = require('node-fetch');  var DOMParser = require('react-native-html-parser').DOMParser;






function getbooks() {

  fetch('https://github.github.io/fetch/').then(function(response) {
if (response) {
  return response
} else {
  var error = new Error(response.statusText)
  error.response = response
  throw error
}
})
}
const books=getbooks();
console.log(books);


var DOMParser = require('react-native-html-parser').DOMParser;
var doc = new DOMParser().parseFromString(
    books);

console.log(doc);
console.log('end');

Answer 1

您的端点返回了什么？

您可以尝试：

注意：您尝试记录来自asyncrhonus的响应。您需要使用

异步并等待（带有承诺）。像...

async function getBooks(){
var response = await fetch('https://github.github.io/fetch/', {
method: 'GET',
headers: {
    Accept: 'application/json',
},
}).then((response) => {console.log(response);return response})
    .then((responseJson) => {
      return responseJson.json();
    })
    .catch((error) => {
        console.error(error);
        return {error: "Couldn't get books"}
    });
console.log(response);

}

getBooks();

Answer 2

问题是您没有从getBooks函数返回任何内容。您不应该将async/await的语法与promises的语法混合使用，因为它们不能一起使用。在尝试查看async/await和promises https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8

之间的差异时，以下文章是一个不错的起点

让我们重构您的getBooks函数，以便您可以从中获得一些收益。

getBooks = () => {
  return new Promise( async (resolve, reject) => {
    try { 
      let response = await fetch('http:/github.github.io/fetch/');
      resolve(response);
      // usually we are getting json from a fetch response so the next step would be
      // let json = await response.json();
      // resolve(json) // instead of resolve(response)
    } catch (error) {
      reject(error);
    }
  })
}

我们将兑现承诺，这将使我们能够处理正确的事情和错误的事情。如果好，我们将resolve，如果不好，我们将reject。
确保一切都包裹在try/catch中，因为await会抛出
如果我们从response获得了fetch，那么我们会resolve。
如果我们得到error，那么我们reject。

现在您有了一个可以为您提供一些功能的功能，您可以通过以下方式使用它。

try {
  let response = await this.getBooks(); 

  // do stuff with the books here
  // usually the html is contained in the .bodyInit part of the response so you should be able to access it from there

  let html = response._bodyInit
  var doc = new DOMParser().parseFromString(html)

  // access the doc elements here
} catch (error) {
  // do something with the error
}

请注意，由于try/catch函数可以抛出

，因此需要包裹在await中

警告

我注意到的一件事是react-native-html-parser是一个非常老的软件包，它的最新更新是在2年前，而在npm网站上与其回购链接的链接显示，回购是gone。

反应本地环境

尝试使用您提供的链接，然后使用

通过html解析器运行该链接时

var doc = new DOMParser().parseFromString(html)

我收到以下错误

[xmldom警告]未关闭的xml属性，@＃[line：3，col：22]

进行更改，以便我明确地告诉解析器我正在使用'text/html'，从而终止了该错误，但是它导致计算机的CPU峰值运行，并且开始吞噬所有处理能力。

我不确定是否可以再使用此软件包。

节点环境

当我在node环境而不是react-native环境中运行代码时，使用node-fetch尝试访问您的网站地址时出现以下错误

TypeError：仅支持绝对URL

看来node-fetch无法访问不是绝对URL的任何内容，而fetch中的react-native就是这样。

我试图用react-native-html-parser感染html页面

2 个答案:

警告

反应本地环境

节点环境