JavaScript 修复 XMLHttpRequest is not defined 错误
出现“XMLHttpRequest is not defined”错误有两个主要原因:
- 尝试在 Node.js 应用程序(在服务器端)中使用 XMLHttpRequest。
- 拼写错误的 XMLHttpRequest 关键字(区分大小写)。
首先,检查 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 更冗长且更难阅读。
相关文章
在 Angular 中上传文件
发布时间:2023/04/14 浏览次数:71 分类:Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间:2023/04/14 浏览次数:91 分类:Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间:2023/04/14 浏览次数:139 分类:Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间:2023/04/14 浏览次数:142 分类:Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间:2023/04/14 浏览次数:150 分类:Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间:2023/04/14 浏览次数:107 分类:Angular
-
我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间:2023/04/14 浏览次数:104 分类:Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。