Axios 响应返回 HTML 而不是 JSON 数据 - JavaScript

在使用 Axios 库进行网络请求时，我们常常期望服务器返回 JSON 格式的数据。但有时候服务器返回的可能是 HTML 格式的数据，这对于我们的应用来说是无用的。本文将介绍如何检测和处理这种情况。

检测 HTML 响应

要处理 HTML 响应，我们需要首先检测响应的 MIME 类型是否为 HTML。Axios 提供了 responseType 选项来指定预期的响应类型。我们可以将其设置为 document，然后使用 response.data 得到响应的 DOM 对象。

axios.get('/api/data', { responseType: 'document' })
  .then(response => {
    if (response.data instanceof HTMLDocument) {
      // 处理 HTML 响应
    } else {
      // 处理 JSON 响应
    }
  });

解析 HTML 响应

得到响应的 DOM 对象之后，我们可以使用 DOM API 解析 HTML。比如，我们可以使用 querySelectorAll 得到所有的数据行，并将它们转换成 JSON 格式的数据。

const rows = response.data.querySelectorAll('table tr');
const data = [];

for (const row of rows) {
  const cells = row.querySelectorAll('td');

  data.push({
    name: cells[0].textContent,
    age: parseInt(cells[1].textContent),
    address: cells[2].textContent,
  });
}

结论

处理 HTML 响应可能会比处理 JSON 响应更加困难，因为 HTML 格式通常不是规范化的。但是，通过检测和解析 HTML，我们可以使我们的应用程序更加灵活和适应各种情况。