什麼是及如何使用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請求。