如何在 Javascript 中進行發布請求

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

在構建 Web 應用程序時,有時您可能想要發出 HTTP 請求以訪問外部資源。例如,假設您正在創建一個博客。您可能需要調用 API 來檢索要在每篇博文上顯示的評論列表。

Axios 是一個流行的 JavaScript 庫,您可以使用它來發出 Web 請求。在本指南中,我們將引導您了解如何使用 Axios 發出 GET 請求。我們將通過一些示例來展示 Axios 的工作原理以及如何在代碼中使用它。

為什麼選擇 Axios?

Axios 是一個基於 Promise 的庫,它可以輕鬆實現發出網絡請求

您可能想知道:。為什麼我應該在許多其他 Web 請求庫之一上使用 Axios?確實還有其他庫(例如 extract)可用於發出 GET 請求,但 Axios 具有這些庫所沒有的許多優點。

Axios 支持舊版瀏覽器,這將允許您創建更易於訪問的用戶體驗。 Axios 還帶有內置的 CSRF 保護來防止漏洞。它也適用於 Node.js,如果您同時開發前端和後端 Web 應用程序,它非常適合。

如何安裝 Axios

在使用 Axios 創建 GET 請求之前,您需要安裝該庫。您可以使用以下命令執行此操作:

此命令將安裝 Axios 並保存到本地 package.json 文件。您現在可以開始使用 Axios 庫了。

如何申請 Axios 幫助

開始使用 Axios 很簡單。要發出網絡請求,只需指定要從中請求數據的 URL 和要使用的方法

假設我們想從 chat -Facts 我們可以使用以下代碼來實現:

這段代碼返回一個promise,代表一個尚未完成的請求來檢索這個HTTP請求的數據,你必須使用這樣的異步/等待函數:

wi 服務器響應了一個聊天事實列表。

當我們調用這個函數時,一個 HTTP GET 請求被發送到聊天事實 API。我們使用異步/等待功能,以便我們的程序在 Web 請求完成之前不會繼續。這是因為 Axios 首先返回了一個 Promise。返回請求完成後發出的請求的數據

Axios 庫包含可用於發出請求的縮短命令。

在本教程中,我們將重點介紹axios。 get ()axios.post (),它們使用與所有其他速記方法相同的基本語法。

使用 Axios 發出 GET 請求

在我們的最後一個例子中,我們讓 Axios 有機會發出一個 GET 請求。但是有一種更簡單的方法可以使用 Axios 發出 GET 請求:。使用

axios.get () 假設我們要檢索關於貓的事實列表,它會計算返回了多少。您可以使用以下代碼執行此操作:

生成這個響應的代碼:返回了225個聊天事實

分解我們的代碼。首先,我們聲明了一個名為 getCatFacts () 的異步函數,我們在其中發出 Web 請求。

>

然後我們使用 axios.get ( ) 從聊天事實 API 中檢索聊天事實列表;“Response.data”包含響應對象和來自我們請求的請求正文。

最後,我們使用.length 屬性來計算我們的請求返回了多少貓事實。然後我們將該數字添加到字符串“返回的貓事實。

使用 Axios 發送標頭

GET 請求,您可能需要向您所在的資源網站發送自定義標頭請求。需要站點身份驗證的 API。您可能需要指定身份驗證標頭

<。 P> 指定一個axios請求的header,可以使用如下代碼:

此代碼將發送`header` header-name ”將“標頭值”添加到我們指定的 url。

使用 Axios 發送參數

許多 API 允許您在 GET 請求中發送參數。例如,API 可能允許您通過使用限制參數來限制返回的響應數量。

使用 Axios 可以輕鬆指定要與 Web 請求一起發送的參數。您可以將參數包含為查詢字符串或使用 params 屬性。以下是 Axios 使用查詢字符串指定參數發出 Web 請求的示例:

您可以使用以下代碼在 Axios 選項中指定 params 屬性:

這兩個例子發送一個參數名稱為“日期”和值“ 05/15/2020 "在指定的 URL。

如何使用Axios發出POST請求

發出POST請求的語法與GET請求相同,不同的是你應該使用代碼<> axios.post( ) 而不是 axios.get ()

假設您想向發布 API 發送請求。您可以使用以下代碼執行此操作:

p>

您可以像執行 GET 請求一樣指定標頭和參數。假設您要發送標頭“Name”,其值為“James”你的 POST 請求。您可以使用以下代碼:

結論

Axios 庫用於在 JavaScript 中發出 Web 請求。它既可以在前端使用 JavaScript,也可以在後端使用像 Node.js 這樣的平台。與其他 Web 查詢庫不同,Axios 內置了 CSRF 保護,支持舊版瀏覽器,並使用 Promise 框架。它非常適合發出 Web 請求。

您現在可以開始發出 GET 和 POST 請求了像專業的 Web 開發人員一樣使用 Axios。