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

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庫。

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

$.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技術如何運做。

該fetch函數須要一個必需參數：endpointURL。它還有其餘可選參數，以下例所示：

如您所見，fetch製做HTTP請求有許多優勢。此外，在fetch中還有其餘模塊和插件，容許咱們向服務器端發送和從服務器端接收請求，例如Axios.

Axios

Axios是一個用於發出HTTP請求的開源庫，並提供許多強大的功能。咱們來看看它是如何工做的。

用法： 首先，您須要包含Axios。有兩種方法能夠在項目中包含Axios。 首先，你可使用npm： npm install axios --save

而後你須要導入它 import axios from 'axios'

使用axios發出請求： 使用Axios，您可使用GET和POST從服務器檢索和發佈數據。

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

axios採用一個必需參數，也能夠採用第二個可選參數。這將一些數據做爲簡單查詢。

POST：

Axios返回「Promise」。若是您熟悉promises，您可能知道promise能夠執行多個請求。您可使用axios執行相同的操做並同時運行多個請求。

Axios支持許多其餘方法和選項。你能夠官網瞭解他們