JavaScript中發出HTTP請求最常用的方法

新前端社群發表於2018-07-11

JavaScript具有很好的模組和方法來傳送可用於從伺服器端資源傳送或接收資料的HTTP請求。在本文中，我們將介紹一些在JavaScript中發出HTTP請求的流行方法。

Ajax

Ajax是發出非同步HTTP請求的傳統方式。可以使用HTTP POST方法傳送資料，並使用HTTP GET方法接收資料。我們來看看傳送GET請求。我將使用JSONPlaceholder，這是一個免費的線上REST API，適用於以JSON格式返回隨機資料的開發人員。要在Ajax中進行HTTP呼叫，您需要初始化一個新XMLHttpRequest()方法，指定URL端點和HTTP方法（在本例中為GET）。最後，我們使用該open()方法將HTTP方法和URL端點繫結在一起，並呼叫該send()方法來觸發請求。我們使用XMLHTTPRequest.onreadystatechange包含要在readystatechanged事件觸發時呼叫的事件處理程式的屬性將HTTP響應記錄到控制檯。

如果您檢視瀏覽器控制檯，它將返回JSON格式的資料陣列。但是我們怎麼知道請求是否完成了？換句話說，我們如何使用Ajax處理響應？該onreadystatechange有兩個方法，readyState 和 status允許我們可以檢查請求的狀態。

如果readyState等於4，則表示請求已完成。除了使用JavaScript直接進行Ajax呼叫之外，還有其他更強大的HTTP呼叫方法，例如$.AjaxjQuery方法。

jQuery方法 jQuery有很多方法可以輕鬆處理HTTP請求。要使用這些方法，您需要在專案中包含jQuery庫。

$.ajax

jQuery Ajax是進行HTTP呼叫的最簡單方法之一。

$ .ajax方法需要許多引數，其中一些是必需的，另一些是可選的。它包含兩個回撥選項success並error處理收到的響應。

$.get方法

$.get方法用於執行GET請求。它需要兩個引數：請求地址和回撥函式。

$.post

該$.post方法是將資料釋出到伺服器的另一種方法。它需要三個引數：請求的url地址您要傳送的資料和回撥函式。

$.getJson

該$.getJSON方法僅檢索JSON格式的資料。它需要兩個引數：url和回撥函式。

jQuery具有所有這些方法來請求或將資料釋出到遠端伺服器。但實際上你可以將所有這些方法合而為一：$.ajax方法，如下例所示：

Fetch

fetch是一個新的功能強大的Web API，可以讓您發出非同步請求。事實上，這fetch是製作HTTP請求的最佳和最喜歡的方式之一。它返回一個“Promise”，這是ES6的一大特色。如果你不熟悉ES6，你可以閱讀一下關於ES6的文章。Promise允許我們以更智慧的方式處理非同步請求。我們來看看fetch技術如何運作。