JavaScript 中的 HTTP GET 请求

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

Vue React JavaScript Angular CSS HTML

JavaScript 中的 HTTP GET 请求

作者：迹忆客最近更新：2024/03/22 浏览次数：

在 JavaScript 中，我们通常使用 XMLHttpRequest API 通过其方法在 Web 服务器和浏览器之间传输数据。最近，该楼层已归 Fetch API 所有，因为它易于实现并启用了 Promise。

此外，Fetch 约定支持 ES6 更新和修改。

在这里，我们将演示仅使用 XMLHttpRequest API 对象和 Fetch API 从服务器获取 HTTP GET 请求 到 Web 浏览器的实例。

使用 `XMLHttpRequest` API 检索 `GET` 请求

使用 XMLHttpRequest API，我们将初始化一个名为 xmlhr 的对象并启动此 API 可用的其他方法。

首先，我们将使用 open 方法从服务器设置 GET 以及 URL。

此外，我们将在 open 方法中看到一个 false 参数，该参数用于同步请求的情况下 true in the case of asynchronous requests。

代码片段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
<button onclick="httpGet('https://jsonplaceholder.typicode.com/todos/1')">Get</button>
  <p id="get"></p>
</body>
</html>

function httpGet(theUrl) {
  var xmlhr = new XMLHttpRequest();
  xmlhr.open('GET', theUrl, false);
  xmlhr.send(null);
  document.getElementById('get').innerHTML = xmlhr.responseText;
  return xmlhr.responseText;
}

输出：

使用 `fetch` API 检索 `GET` 请求

如果你正在寻找一种简单且性能更好的方法来从服务器中提取数据，那么 fetch API 使该过程非常方便。

正如你将在示例中看到的，此 API 的命令更具可预测性，并且易于跟踪工作方法。最初，你将获取 URL，然后检测数据类型。

稍后我们将提取数据并检查是否有任何错误可用。最后，如果没有错误，输出将在控制台面板中预览。让我们检查一下代码以获得正确的理解。

代码片段：

fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((r) => r.json())
    .then((data) => console.log(data))
    .catch((e) => console.log('error'));

输出：

上一篇：JavaScript 中的 extend 方法

下一篇：使用 JavaScript 将 Blob 转换为文件

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

本文地址：