建置 Web 應用程式時，發出 HTTP 請求是一項常見任務。在 JavaScript 中，有多種方法可以實現此目的，每種方法都有自己的優點和用例。在這篇文章中，我們將探討四種流行的方法：fetch()、axios()、$.ajax() 和 XMLHttpRequest()，並為每個方法提供簡單的範例。
1。使用 fetch()
fetch() 函數可讓您要求 HTTP 從網路取得資源。它使用 Promise，這使得處理非同步操作變得更加容易。
範例
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
2。使用 Axios()
axios() 是一種流行的 HTTP 用戶端，用於從瀏覽器或 Node.js 應用程式發出請求。它類似於內建的 fetch() API，但包含其他功能，例如請求和回應攔截器、自動 JSON 解析等。
範例
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));
3。使用 $.ajax()
如果您使用 jQuery，則可以使用 $.ajax() 函數發出 HTTP 請求。它提供了一個簡單的介面來發出 AJAX 請求和處理回應。
範例
$.ajax({
url: 'https://api.example.com/data',
method: 'GET',
success: function(data) {
console.log(data);
},
error: function(error) {
console.error('Error:', error);
}
});
4。使用 XMLHttpRequest()
XMLHttpRequest 物件提供了一種無需刷新頁面即可從 URL 取得資料的簡單方法。它比 fetch() 或像 Axios 這樣的庫要低一些，但它仍然在許多應用程式中廣泛使用。
範例
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(JSON.parse(xhr.responseText));
} else {
console.error('Error:', xhr.statusText);
}
};
xhr.onerror = function() {
console.error('Request failed');
};
xhr.send();
在此範例中，我們建立一個新的 XMLHttpRequest，開啟一個 GET 請求，並透過檢查狀態碼和解析回應文字來處理回應。
以上是透過在 JavaScript 中使用 API 來取得資料。的詳細內容。更多資訊請關注PHP中文網其他相關文章！
