在 Javascript 中发出 HTTP 请求的方法
在 Javascript 中发出 HTTP 请求的方法
了解如何向端点发出 HTTP 请求并能够发送、检索或获取数据非常重要。 Javascript 有多种方式和方法向各种服务器端点和数据库发出 HTTP 请求。
在本文中，我们将讨论用 Javascript 语言发出 HTTP 请求的各种方法
1) XMLHttpRequest
XMLHttpRequest 是 Javascript 中的一个内置对象，用于从 Web 服务器发出 HTTP 请求。这是在 ES6 之前用 Javascript 语言发出 HTTP 请求的唯一方式和方法。我们可以使用 HTTP GET 方法接收和获取数据，我们可以使用 HTTP POST 方法发送数据
在此示例中，我们将使用 JSON Placeholder API，这是一个免费的 API，供开发人员进行测试
步骤1
我们创建一个新的实例 XMLHttpRequest() 目的
//创建一个新的 XMLHttpRequestObject 实例 常量请求 = 新 XMLHttpRequest();
第2步
我们继续从服务器端点创建一个新的 HTTP 请求
//创建一个新的XMLHttpRequest对象实例
常量请求 = 新 XMLHttpRequest();
//打开请求
request.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
//发送请求
请求.发送（）；
然后我们使用 打开（） 方法有两个参数，第一个参数是 HTTP 类型/请求方法，在这种情况下，它是我们正在执行的 GET 请
而第二个参数是我们要从中获取数据的服务器端点。然后我们使用 发送（） 方法
第 3 步
我们必须跟踪请求的进度才能知道请求是否成功，所以我们在请求中添加一个事件监听器来监听 就绪状态改变 当 XMLHttpRequest 的 readyState 属性改变时执行的事件
readyState 值为 4 表示请求完成，状态为 200 表示请求成功
//创建一个新的XMLHttpRequest对象实例
常量请求 = 新 XMLHttpRequest();
//打开请求
request.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
//发送请求
请求.发送（）； request.addEventListener('readystatechange', ()=>{
如果（request.readyState == 4 && request.status == 200）{
console.log(request.responseText);
} 别的{
console.log('获取数据出错');
}
})
所以，我们表演和 如果（） 检查 readyState 是否等于 4 以及状态是否为 200 的语句，这意味着我们的请求是成功的，所以我们 console.log() request.responsetext 这是从我们制作我们的服务器端点接收到的文本（数据）请求，如果请求成功，还会在控制台中记录错误消息。在此示例中，我们的端点是 JSON 占位符 API。
在我们的控制台中，您会看到类似这样的内容。
{
“用户ID”：1，
“身份证”：1，
“标题”：“选择或
“完成”：假
}
我们终于成功地使用 XMLHttpRequest 从 JSON 占位符 API 获得了一个假 id
2) 使用 Fetch API
Fetch API 帮助我们以与 XMLHttpRequest 类似的方式发出 HTTP 请求，但 Fetch 使用 Promise API。当我们使用 fetch API 发出请求时，它返回一个本质上是异步的 Promise。
Fetch API 有一个强制参数，即服务器端 URL
//获取API
fetch('https://jsonplaceholder.typicode.com/todos/1') //获取API
fetch('https://jsonplaceholder.typicode.com/todos/1').then((response) =>{
// 它返回一个承诺
返回响应.json();
}).then((响应) =>{
控制台日志（响应）；
}).catch((错误)=>{
控制台日志（错误）；
})
我们坚持 然后（） 方法来获取返回我们的请求响应的 API，然后我们将响应记录到控制台。 。抓住（） 如果我们的 HTTP 请求中有错误，该方法可以帮助我们捕获请求中的错误。
在我们的浏览器控制台中，我们得到一个对象的输出：
{userId：1，id：1，title：'选择与否'，完成：false}
3) 轴心
Axois 是一个用于向各种端点发出 HTTP 请求的库。Axios 是一种基于 Promise 的发出 HTTP 请求的方法。 axios 的一个独特功能是它返回已经解析的 JSON 数据。Axios 在后台使用了 XMLHttpRequest 方法。
安装 Axios
我们可以通过安装 axios 来使用它，还有其他安装 axios 的方法，但我们将在本文中使用 CDN
//使用CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
我们将这个 Script 标签放在 HTML 文件的 Head Section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 javascript 发出 HTTP 请求的方法</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
现在我们可以继续使用 axios 发出 HTTP 请求了
//axios
axios.get('https://jsonplaceholder.typicode.com/todos/1').then((data)=>{
控制台.log（数据）；
}).catch((错误)=>{
控制台日志（错误）；
})
我们通过在 axios 上调用 get 方法来发出一个 GET 请求，该方法带有我们想要发送请求以从其获取数据的 URL。它返回一个承诺
在浏览器控制台中，我们有一个包含我们数据的对象：
{数据：{...}，状态：200，statusText：''，标题：{...}，配置：{...}，...}
- 使用 jQuery
jQuery 有几种方法来发出 HTTP 请求但是为了本教程的缘故，我们将使用 $.ajax() 方法 。
$.ajax() 方法用于向特定 URL 或 Endpoint 发出异步 HTTP 请求。
为了能够利用 $.ajax() 您将其库源文件包含在 html 页面的 head 部分中
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 javascript 发出 HTTP 请求的方法</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
下面是 $.ajax() 的语法
$.ajax({
网址：网址，
类型：类型，
成功：成功，
错误：错误
});
网址： 它是我们希望使用 ajax 发出请求的 URL / 端点。
类型： 它定义了请求中 HTTP 方法的类型
成功： 如果请求成功，它是根据请求的响应触发的回调函数
错误： 如果请求中有错误，它是根据请求的响应触发的回调函数
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/1',
类型：'GET'，
成功：（res）=>{
控制台.log(res);
},
错误：（错误）=>{
控制台日志（错误）；
},
});
在浏览器控制台中，您会收到如下所示的请求响应：
{userId：1，id：1，title：'选择与否'，完成：false}
结论
我们已经学习了各种在 javascript 中发出 HTTP 请求的方法。您可以使用各种方法中的任何一种在您的项目中提出请求。快乐编码！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
