如何解析Fetch响应中的HTML页面？已尝试异步与Promise语法但无法编译

看起来你在异步处理和DOM解析的时机上踩了几个小坑，我来帮你理顺问题并给出可运行的代码：

先说说你代码里的核心问题 #

1. getbooks没返回Promise：你写的getbooks函数里发起了fetch请求，但没有把这个异步操作的Promise返回出去，所以const books = getbooks()拿到的其实是undefined，根本不是你要的HTML内容。
2. 没提取HTML文本：fetch返回的response是响应对象，不是直接的HTML字符串，得调用response.text()才能拿到页面的HTML内容。
3. 解析时机不对：你把DOM解析的代码写在了异步请求外面，这时候请求还没完成，books根本没有有效数据，自然没法解析。

修正后的Promise链式调用版本 #

const fetch = require('node-fetch');
// 只需要引入一次DOMParser就行
const DOMParser = require('react-native-html-parser').DOMParser;

function getbooks() {
  // 必须返回fetch的Promise链，这样外部才能拿到异步结果
  return fetch('https://github.github.io/fetch/')
    .then(response => {
      // 先判断响应状态是否正常
      if (!response.ok) {
        const error = new Error(response.statusText);
        error.response = response;
        throw error;
      }
      // 提取HTML文本内容
      return response.text();
    })
    .then(htmlText => {
      // 拿到文本后再进行DOM解析，记得指定第二个参数为text/html
      const doc = new DOMParser().parseFromString(htmlText, 'text/html');
      console.log('解析后的DOM对象:', doc);
      return doc; // 如果需要外部使用解析结果，就返回它
    })
    .catch(error => {
      console.error('请求或解析出错:', error);
    });
}

// 调用函数并处理异步结果
getbooks().then(parsedDoc => {
  console.log('最终拿到的解析结果:', parsedDoc);
});

console.log('end');

更简洁的async/await版本 #

如果你觉得链式调用看着绕，用async/await会更直观：

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

async function getbooks() {
  try {
    const response = await fetch('https://github.github.io/fetch/');
    if (!response.ok) {
      throw new Error(`请求失败，状态码: ${response.status}`);
    }
    const htmlText = await response.text();
    const doc = new DOMParser().parseFromString(htmlText, 'text/html');
    console.log('解析后的DOM对象:', doc);
    return doc;
  } catch (error) {
    console.error('出问题啦:', error);
  }
}

// 用立即执行的异步函数来调用getbooks
(async () => {
  const parsedBooks = await getbooks();
  console.log('最终结果:', parsedBooks);
})();

console.log('end');

几个必须记住的点 #

• 异步操作的结果不能同步直接获取，必须用.then()或者await等待结果返回后再处理
• DOMParser.parseFromString的第二个参数不能省，要明确指定是text/html，不然解析可能出问题
• 记得处理异常，避免请求失败或者解析出错时程序直接崩溃

内容的提问来源于stack exchange，提问作者Максим Малин