迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

JavaScript 修复 XMLHttpRequest is not defined 错误

作者:迹忆客 最近更新:2022/10/31 浏览次数:

出现“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-fetchaxios,它们是与服务器交互的更新且用户友好的方式。 如果大家需要在 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 更冗长且更难阅读。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便