JavaScript 修复 XMLHttpRequest is not defined 错误

出现“XMLHttpRequest is not defined”错误有两个主要原因:

  1. 尝试在 Node.js 应用程序(在服务器端)中使用 XMLHttpRequest。
  2. 拼写错误的 XMLHttpRequest 关键字(区分大小写)。

JavaScript 修复 XMLHttpRequest is not defined 错误

首先,检查 XMLHttpRequest 单词的拼写,有很多地方可能会出现拼写错误。

创建 XMLHttpRequests 的 XMLHttpRequest() 构造函数是一个内置在浏览器中的对象,它不作为 Node.js(在服务器上)中的内置模块包含在内。

要解决“XMLHttpRequest is not defined”错误,请安装替代包,如 node-fetch 或 axios,它们是与服务器交互的更新且用户友好的方式。 如果大家需要在 Node.js 中工作的 XMLHttpRequest 替换,请使用 xhr2 包。

本文包含有关如何在 Node.js 应用程序中使用 node-fetch、axios 和 xhr2 模块的示例。

这是一个使用 node-fetch 模块的示例。

首先安装模块:

$ npm install node-fetch

现在我们可以在 Node.js 代码中使用该模块:

import fetch from 'node-fetch';

async function getUser() {
  try {
    const response = await fetch('https://www.jiyik.com/api/');

    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }

    const result = await response.json();
    return result;
  } catch (err) {
    console.log(err);
  }
}

console.log(await getUser());

请注意,在撰写本文时,要在 NodeJs 项目中使用 ES6 模块导入和导出,我们必须在 package.json 文件中将 type 属性设置为 module:

{
  "type": "module",
  // ... 👇️ rest
}

浏览器也支持 fetch 方法,因此我们的客户端和服务器端代码将保持一致。

或者,可以使用流行的 axios 模块发出 HTTP 请求。

axios 包也是通用的,可以在浏览器和服务器上使用。

首先,安装模块:

$ npm install axios

现在我们可以使用它了:

import axios from 'axios';

async function getUser() {
  try {
    const response = await axios.get('https://www.jiyik.com/api/');

    return response.data;
  } catch (err) {
    console.log(err);
  }
}

console.log(await getUser());

axios 包非常好,因为它删除了 fetch() 方法附带的一些样板。 这是一个更高级别的抽象,允许我们编写更少的代码。

最后,如果我们需要在 Node.js 中工作的 XMLHttpRequest 替代方案,请使用 xhr2 包。

首先安装模块:

$ npm install xhr2

并在我们的 Node.js 代码中使用它:

import XMLHttpRequest from 'xhr2';

function getUser() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function logger() {
    if (this.readyState === 4 && this.status === 200) {
      console.log(this.responseText);
    }
  };
  xhttp.open('GET', 'https://www.jiyik.com/api/', true);
  xhttp.send();
}

getUser();

XMLHttpRequest 方法比 fetch 或 axios 更冗长且更难阅读。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » JavaScript 修复 XMLHttpRequest is not defined 错误