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

$.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從服務器檢索和發佈數據。

axios採用一個必需參數,也可以採用第二個可選參數。這將一些數據作爲簡單查詢。

POST:

Axios返回“Promise”。如果您熟悉promises,您可能知道promise可以執行多個請求。您可以使用axios執行相同的操作並同時運行多個請求。

Axios支持許多其他方法和選項。你可以官網瞭解他們

最後

爲了幫助大家讓學習變得輕鬆、高效,給大家免費分享一大批資料,幫助大家在成爲全棧工程師,乃至架構師的路上披荊斬棘。在這裏給大家推薦一個前端全棧學習交流圈:866109386.歡迎大家進羣交流討論,學習交流,共同進步。

當真正開始學習的時候難免不知道從哪入手,導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握,學習時頻繁踩坑,最終浪費大量時間,所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程序員們,祝福大家在往後的工作與面試中一切順利。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章