什么是及如何使用JavaScript HTTP请求

网站的前端和后端之间的互动是通过HTTP请求实现的。像更新数据库中的新/老用户、从你的WordPress仪表盘发布博文、从你的个人资料中删除图片、更新你的简历等功能都需要服务器和客户端之间的互动来修改数据。

在构建网络应用时–包括前端和全栈网络应用–我们经常与存储在不同数据库和服务器上的数据进行交互。这些服务器可能属于第三方，也可能是由项目的开发者创建的。

为了与这些服务器互动，我们可以使用不同的HTTP方法来请求数据。我们可以使用专门的HTTP动词，如POST、GET、PUT/PATCH和DELETE，在服务器上创建、读取、更新和删除（或CRUD）数据。

在本教程中，你将学习向远程服务器发出HTTP请求并在JavaScript中执行CRUD操作的各种方法。

每一节都会介绍一种发送HTTP请求的新方法。我们将从内置的方法开始，比如fetch API和XMLHttpRequest对象，然后再看看一些开源的HTTP请求库，比如Axios和SuperAgent。

1. 什么是JavaScript HTTP请求？
2. 如何用JavaScript进行HTTP请求

什么是JavaScript HTTP请求？

JavaScript中的HTTP请求是一组预定义的方法，用于与存储在服务器上的数据进行交互。

每个发送到服务器的请求包括一个端点和正在发送的请求类型。你可以把端点视为两个程序之间的网关，即客户端和服务器。

客户端是发送请求的程序，而服务器是接收请求的程序。服务器会根据请求的有效性发回一个响应。如果请求成功，服务器会发回XML或JSON格式的数据（大多数情况下是JSON），如果请求失败，服务器会发回一个错误信息。

服务器发回的响应通常与状态码有关。这些代码帮助我们理解当服务器收到一个请求时，它想说什么。下面是其中的一些代码和它们的含义：

• 100-199表示一个信息性响应。
• 200-299表示一个成功的请求。
• 300-399表示重定向。
• 400-499表示客户端错误。
• 500-599表示服务器错误。

我们将在接下来的章节中更多地讨论其中的一些内容。

在下一节中，你将看到在JavaScript中进行HTTP请求的不同方式。

如何在JavaScript中进行HTTP请求

本节将分为几个小节，每节都会教你用不同的方法在JavaScript中进行HTTP请求。

所讨论的每种方法都有一个例子，显示如何向服务器发送POST、GET、PUT/PATCH和DELETE请求。

JSON Placeholder将作为远程服务器/端点，我们的所有请求都将被发送。

1. 如何使用XMLHttpRequest（AJAX）在JavaScript中进行HTTP请求

XMLHttpRequest是一个内置的JavaScript对象，用于与服务器进行交互，并在不重载浏览器的情况下加载网页内容。

在本节中，您将看到如何使用 XMLHttpRequest 发送 POST、GET、PUT/PATCH 和 DELETE 请求。

AJAX是用来进行异步的HTTP请求的。这简单地意味着，当请求的响应还在等待时，你的JavaScript代码的其他部分可以继续运行，而不必先等待请求完成。

你也可以通过使用AJAX将修改推送到你的网页的特定部分，而不强迫访问者重新加载整个页面。

默认情况下，AJAX与XMLHttpRequest对象一起工作，因此本节中的例子可以被视为AJAX请求。

信息：最初，你可以通过在请求中使用 true （异步）和 false 参数来指定一个请求是否应该是异步的，但后者现在已被废弃。

如何使用XMLHttpRequest在JavaScript中发送一个GET请求

当你想从服务器上获取数据时，你就会使用GET请求。为了在JavaScript中使用XMLHttpRequest发送一个成功的GET请求，你应该确保正确完成以下工作：

1. 创建一个新的XMLHttpRequest对象。
2. 通过指定请求类型和端点（服务器的URL）打开一个连接。
3. 发送请求。
4. 听取服务器的响应。

现在，我们已经看到了一些使用XMLHttpRequest发送POST请求的步骤，让我们看看一个代码实例：

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
const data = xhr.response;
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};

我们将对上面的代码进行分解，以帮助你理解这里发生的事情。

我们做的第一件事是创建一个新的XMLHttpRequest对象，并将其存储在一个叫做 xhr 的变量中。就是说：

const xhr = new XMLHttpRequest();

然后，我们指定了请求类型（GET）和请求将被发送到的端点（在这种情况下，”https://jsonplaceholder.typicode.com/users”）ː。

xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

为了向服务器发送请求，我们使用了 send() 方法。

当服务器发回数据时，你可以指定返回数据的格式。

在大多数情况下，会使用JSON格式。所以我们通过添加以下内容确保我们的数据以JSON格式返回：

xhr.responseType = "json";

在这一点上，我们已经成功发送了一个GET请求。接下来要做的是通过使用一个事件监听器来监听服务器的声音：

xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
const data = xhr.response;
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};

在上面的代码中，我们利用了 onload 事件监听器。使用一个 if 语句，我们检查了服务器的响应状态。

如果客户端的状态是4（DONE），并且状态代码是200（成功），那么数据将被记录到控制台。否则，将出现一个显示错误状态的错误信息。

如果你已经跟进到这一点，没有任何错误，你应该有一个数组的对象在你的控制台ː

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

这是从服务器上获取的数据。

如何使用XMLHttpRequest在JavaScript中发送一个POST请求

通过POST请求，你可以将新的信息（数据）作为一个对象发送到服务器/数据库。这个对象可以是关于一个新用户的信息，一个新的待办事项，或者其他你需要记录的东西。

本节中你将看到的代码例子与上一节中的类似。主要的区别是，POST请求需要一些信息，这些信息通常在发送到服务器之前被存储在一个对象中。

这里有一个例子：

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
const body = JSON.stringify({
title: "Hello World",
body: "My POST request",
userId: 900,
});
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 201) {
console.log(JSON.parse(xhr.responseText));
} else {
console.log(`Error: ${xhr.status}`);
}
};
xhr.send(body);

在上面的代码中，要发送至服务器的信息被存储在一个名为 body 的变量中。它持有三个属性： title, body, 和 userId。

请注意，持有对象的body变量在发送到服务器之前必须被转换为JSON对象。该转换是通过 JSON.stringify() 方法完成的。

为了确保JSON对象被发送到服务器，它被作为一个参数传给 send() 方法：

xhr.send(body);

如何使用XMLHttpRequest在JavaScript中发送一个PATCH请求

PATCH请求被用来更新一个对象的指定属性。这与PUT方法不同，后者是更新一个对象的全部内容。

下面是一个在JavaScript中使用XMLHttpRequest的PATCH请求的例子：

const xhr = new XMLHttpRequest();
xhr.open("PATCH", "https://jsonplaceholder.typicode.com/posts/101");
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
const body = JSON.stringify({
body: "My PATCH request",
});
xhr.onload = () => {
var data = JSON.parse(xhr.responseText);
if (xhr.readyState == 4 && xhr.status == "200") {
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};
xhr.send(body);

上面的代码，如果成功的话，将记录被更新和发送到服务器的对象的部分。

如何使用XMLHttpRequest在JavaScript中发送一个DELETE请求

就像名字所暗示的那样，DELETE方法是用来从服务器上删除数据的。这对任何JavaScript HTTP方法都是一样的。

在大多数情况下，你必须指定你想删除的数据的ID。这个ID通常是端点/URL中的一个参数。

让我们来看看一个DELETE请求的例子：

const xhr = new XMLHttpRequest();
xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/3");
xhr.onload = function () {
var data = JSON.parse(xhr.responseText);
if (xhr.readyState == 4 && xhr.status == "200") {
console.log(data);
} else {
console.log(`Error: ${xhr.status}`);
}
};
xhr.send();

上面的代码将删除一个在端点（”https://jsonplaceholder.typicode.com/posts/3″）中指定的ID为3的帖子的对象。

2. 如何在JavaScript中使用jQuery进行HTTP请求

jQuery简化了从服务器获取数据的过程，使语法更简短，更直接。

在这一节中，你将看到如何使用不同的jQuery方法进行HTTP请求。

如何在JavaScript中使用jQuery发送一个GET请求

jQuery为我们提供了 $.get() 方法来发送GET请求到服务器。该方法需要两个参数–服务器的URL和一个回调函数，如果请求成功，该函数就会运行。

下面是一个例子：

$.get("https://jsonplaceholder.typicode.com/users", (data, status) => {
console.log(data);
});

从上面的代码中可以看出， $.get() 方法接收了URL（https://jsonplaceholder.typicode.com/users）和一个匿名回调函数作为参数。

通过回调函数，你可以访问请求中的数据和请求的状态。在我们自己的案例中，我们把数据记录到控制台。

这就是使用jQuery发送一个GET请求的简单方法。

如何在JavaScript中使用jQuery发送一个POST请求

要使用jQuery发送一个POST请求，我们使用 $.post() 方法。它需要三个参数–URL，要发送到服务器的数据，以及一个回调函数。

const body = JSON.stringify({
title: "Hello World",
body: "My POST request",
userId: 900,
});
$.post("https://jsonplaceholder.typicode.com/users", body, (data, status) => {
console.log(data);
});

在上面的代码中，我们创建了一个要发送给服务器的对象，并将其存储在一个名为 body 的变量中。这个变量被作为 $.post() 方法的第二个参数传入。

使用回调函数，我们将请求的结果记录到控制台。

3. 如何在jQuery中使用$.ajax()方法进行异步请求

在我们继续发送PATCH和DELETE请求之前，让我们谈谈 $.ajax() 方法。

jQuery中的 $.ajax() 方法是用来做异步请求的。

其语法与其他方法不同。

下面是你如何使用 $.ajax() 方法做一个GET请求：

$.ajax({
url: "https://jsonplaceholder.typicode.com/users",
type: "GET",
success: function (result) {
console.log(result);
},
});

$.ajax() 方法有不同的参数，我们可以使用。

在上面的代码中， url 参数指定了服务器的URL， type 指定了请求类型， success 参数在请求成功时调用一个回调函数。

在下一节中，你将看到如何使用jQuery的 $.ajax() 方法发送PATCH和DELETE请求。

如何使用jQuery的$.ajax()方法在JavaScript中发送一个PATCH请求

在本节中，你将看到如何使用jQuery的 $.ajax() 方法来发送PATCH请求。

下面是代码：

const body = JSON.stringify({
body: "My PATCH request",
});
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/101",
type: "PATCH",
data: body,
success: function (result) {
console.log(result);
},
});

在上面的代码中，要更新的属性被存储在 body 变量中。然后将其作为 data 参数的值。

如果请求成功， success 参数的函数将被执行。

如何使用jQuery的$.ajax()方法在JavaScript中发送一个DELETE请求

使用jQuery的 $.ajax() 方法发送一个DELETE请求，只需要几行代码。

下面是一个例子：

$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/3",
type: "DELETE",
success: function (result) {
console.log(result)
},
});

正如上面所看到的，我们所要做的就是指定带有要删除的对象的ID的URL，请求的类型，以及一个在请求成功时运行的函数。

如何使用jQuery中的$.getJSON方法

$.getJSON 方法提供了一个更短的方法来发送GET请求。

为了使请求成功，你只需要指定URL和回调函数。下面是一个例子：

$.getJSON("https://jsonplaceholder.typicode.com/users", function (result) {
console.log(result)
});

在上面的代码中，我们将服务器的URL和请求成功后运行的函数作为参数传给 $.getJSON 方法。

上面的代码将记录一个包含用户信息的对象数组到控制台。

4. 如何使用Fetch API在JavaScript中进行HTTP请求

fetch API是使用JavaScript与服务器进行交互的最流行的方式之一。它是一个原生的JavaScript API，在发出请求时支持承诺。

使用 fetch API的语法非常容易理解，你将在下面的章节中看到。

如何使用Fetch API在JavaScript中发送一个GET请求

使用 fetch API发送GET请求只需要提供URL。然后返回一个承诺，你可以使用 then() 方法或 async 和 await 关键字来访问。

我们来看看一个例子：

fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((json) => console.log(json));

在上面的代码中，我们把URL传给了 fetch 方法；这个方法返回一个承诺。然后我们使用 then() 方法访问服务器的响应。使用 response.json() 方法将响应转换为一个JSON对象。

获得响应后，我们使用另一个 then() 方法将数据记录到控制台。

如何使用Fetch API在JavaScript中发送一个POST请求

fetch方法有一个第二个参数，允许我们指定body（要发送的数据）和要发送的请求类型。这个第二个参数让我们可以发送POST和PATCH请求。

看一下这个示例代码：

fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
body: JSON.stringify({
title: "Hello World",
body: "My POST request",
userId: 900,
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));

在上面的代码中，我们在 fetch 方法的第二个参数中添加了请求选项。 method 用于指定请求类型， body 指定了要发送到服务器的数据，而 headers 用于指定我们要向服务器发送JSON数据。

就像我们之前发送GET请求时一样，使用 then() 方法访问返回的承诺/响应。

如何使用Fetch API在JavaScript中发送一个PUT请求

在其他章节中，当我们发送请求以更新服务器中的一个对象时，我们使用了PATCH。在本节中，我们将使用PUT，它可以让你更新一个对象的全部内容。

下面是一个使用 fetch API的例子：

fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "PUT",
body: JSON.stringify({
id: 1,
title: "My PUT request",
body: "Updating the entire object",
userId: 1,
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));

由于我们要发送一个PUT请求，我们需要提供要更新的数据，它被作为一个值传递给 body 请求选项。

我们还指定了要更新的对象的ID作为URL的最后一个参数。如果请求运行成功，你应该看到更新的对象被记录到控制台。

如何使用Fetch API在JavaScript中发送一个DELETE请求

发送DELETE请求是非常直接的–你所要做的就是指定要删除的对象的ID。你可以使用 then() 方法来接收服务器的响应，就像我们对其他请求所做的那样。

下面是一个快速的例子：

fetch("https://jsonplaceholder.typicode.com/posts/3", {
method: "DELETE",
});

上面的代码将删除一个ID为3的对象。

5. 如何使用Axios在JavaScript中发出HTTP请求

Axios是一个基于承诺的第三方库，用于发送HTTP请求。就像大多数现代HTTP客户端一样，它简化了向服务器发送请求的过程。

在本节中，你将学习如何使用Axios向服务器发送GET、POST、PUT和DELETE请求。

请注意，Axios并没有内置于JavaScript中——你必须单独安装它才能使用其功能。要在你的项目中安装Axios，请在你的项目终端运行以下命令：

npm install axios

如何使用Axios在JavaScript中发送GET请求

要使用Axios发送一个GET请求，你只需要将URL传给 get() 方法，该方法会返回一个承诺。可以使用 then() 方法访问从承诺中返回的响应。

让我们看一个例子：

axios.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));

上面的代码将记录出一个包含从服务器返回的数据的对象数组。你会注意到，我们不必将返回的对象改为JSON对象–Axios在后台处理了这个问题，你可以使用 response.data 访问数据。

为了捕捉任何错误，我们使用了 catch() 方法。

如何使用Axios在JavaScript中发送一个POST请求

Axios中的POST请求需要两个参数–URL和要发送到服务器的数据。你可以将数据存储在一个变量中，或者直接作为参数传递。

下面是方法：

axios.post("https://jsonplaceholder.typicode.com/posts", {
title: "POST request with Axios",
body: "POST request",
userId: 10,
})
.then(function (response) {
console.log(response.data);
})
.then((error) => console.log(error))

在上面的例子中，我们正在向服务器发送数据。数据是作为 post() 方法的第二个参数传入的。

如果请求被成功发送，你会看到结果被记录到控制台。

如何使用Axios在JavaScript中发送PUT请求

用Axios发送PUT请求与发送POST请求类似。要发送PUT请求，你要指定URL（包括要更新的对象的ID）和要更新的数据作为 put() 方法的第二个参数。

下面的例子将更新一个ID为10的对象：

axios.put("https://jsonplaceholder.typicode.com/posts/10", {
title: "PUT request with Axios",
body: "PUT request",
userId: 10,
})
.then(function (response) {
console.log(response.data);
})
.then((error) => console.log(error))

如何使用Axios在JavaScript中发送DELETE请求

要发送一个DELETE请求，你要在URL中指定要删除的对象的ID。

像往常一样，你必须在指定URL的同时指定要删除的对象的ID。

下面是一个例子：

axios.delete("https://jsonplaceholder.typicode.com/posts/10")
.then(function (response) {
console.log(response);
})
.then((error) => console.log(error))

6. 如何使用SuperAgent在JavaScript中进行HTTP请求

SuperAgent是为在JavaScript中进行HTTP请求而建立的最古老的库之一。就像Axios一样，它支持承诺，并有预置的方法来向服务器发送各种HTTP请求。

要使用SuperAgent，请使用下面的命令安装它：

npm install superagent

我们将从一个GET请求的例子开始。

如何使用SuperAgent在JavaScript中发送GET请求

SuperAgent 为我们提供了一个用于发送 GET 请求的 get() 方法。URL作为该方法的参数被传入。

然后可以使用 end() 方法评估从请求中返回的承诺，如本例所示：

superagent
.get("https://jsonplaceholder.typicode.com/posts")
.end((error, response) => {
console.log(response.body);
});

如何使用SuperAgent在JavaScript中发送POST请求

当使用 SuperAgent 发送 POST 请求时，您将把要发送到服务器的数据作为参数传递给 SuperAgent 的 send() 方法：

superagent
.post("https://jsonplaceholder.typicode.com/posts")
.send({
title: "POST request with SuperAgent",
body: "POST request",
userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
console.log(res.body);
});

在上面的代码中，URL是作为 post() 方法的参数传入的。要发送的数据被传入 send() 方法。使用 end() 方法，我们得到了服务器的响应结果。

如何使用SuperAgent在JavaScript中发送一个PUT请求

你可以在SuperAgent中使用 put() 方法发送一个PUT请求。就像上一节中的例子一样，要更新的数据将作为参数传递给 send() 方法。

下面是一个例子：

superagent
.put("https://jsonplaceholder.typicode.com/posts/10")
.send({
title: "PUT request with SuperAgent",
body: "PUT request",
userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
console.log(res.body);
});

如何使用SuperAgent在JavaScript中发送DELETE请求

要发送一个删除请求，你只需在URL中指定要删除的对象的ID。这将被用作 delete() 方法中的一个参数。

superagent
.delete("https://jsonplaceholder.typicode.com/posts/10")
.end((err, res) => {
console.log(res.body);
});

7. 如何使用Qwest在JavaScript中进行HTTP请求

Qwest是一个用于与服务器交互的AJAX库。它目前在GitHub上存档，随着 fetch API和Axios的出现，创建者停止了对该库的维护。

Qwest还支持使用承诺。

在下面几个小节中，你将看到如何使用Qwest发送 GET 、 POST 、 PUT 和 DELETE 请求。

如何使用Qwest在JavaScript中发送GET请求

Qwest有一个 get() 方法，可以用来发送GET请求。下面是如何使用它的方法：

qwest.get("https://jsonplaceholder.typicode.com/posts")
.then((xhr, response) => console.log(response));

如何使用Qwest在JavaScript中发送POST请求

作为第二个参数，要发送到服务器的数据将被传递到 post() 方法中。第一个参数是URL。

下面是一个例子：

qwest.post("https://jsonplaceholder.typicode.com/posts", {
title: 'POST request with Qwest',
body: 'POST request',
userId: 30
})
.then(function(xhr, response) {
console.log(response)
})
.catch(function(e, xhr, response) {
console.log(e)
});

如何使用Qwest在JavaScript中发送PUT请求

这里的语法与上一节中的语法相同。你所要改变的只是请求类型，然后指定要更新的对象的ID以及你要更新的数据。

看一下这个例子：

qwest.put("https://jsonplaceholder.typicode.com/posts/30", {
title: 'PUT request with Qwest',
body: 'PUT request',
userId: 30
})
.then(function(xhr, response) {
console.log(response)
})
.catch(function(e, xhr, response) {
console.log(e)
});

请注意，ID是在URL中指定的，而不是在被发送到服务器的对象中。

如何使用Qwest在JavaScript中发送DELETE请求

像往常一样，要从服务器上删除一个对象，你必须指定要删除的对象的URL和ID。要删除的对象的URL和ID都将作为参数传给Qwest的 delete() 方法。

下面是一个例子：

qwest.delete("https://jsonplaceholder.typicode.com/posts/30")
.then(function(xhr, response) {
console.log(response)
})
.catch(function(e, xhr, response) {
console.log(e)
});

一旦请求运行成功，一个ID为30的对象将被删除。

小结

我们使用JavaScript与服务器进行交互的能力已经发展了很多年。随着JavaScript开发者社区的不断壮大和活跃，我们仍在不断地做出改变，并引入新的工具来使这个过程更加简单和容易。

本教程中讨论的方法不仅适用于远程服务器–在构建全栈网络应用时，它们也可以用来与你自己的服务器进行交互。它们也适用于众多的JavaScript库和框架。

在本教程中，我们已经教你如何在JavaScript中进行HTTP请求。我们给出了各种例子和解释，展示了如何使用内置的JavaScript方法和第三方库发送GET、POST、PUT/PATCH和DELETE请求。