透過在 JavaScript 中使用 API 來取得資料。

建置 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中文網其他相關文章！