JavaScript >> Javascript 文檔 >  >> JavaScript

使用 Axios 發送 PUT HTTP 請求

簡介

Axios 是一個用於在瀏覽器或 Node.js 中發出 HTTP 請求的 JavaScript 庫。

與流行的 Requests 庫不同,Axios 本身是基於 Promise 的,使其更適合利用新 JavaScript 功能(如 Promises 和 async/await 語法)的現代應用程序。

如果您在 Web 開發方面經驗豐富,並且只想找到有關如何使用 Axios 發送 PUT 請求的答案 - 長話短說是:

const axios = require('axios');

// Wrapper, specific put() function
const res = await axios.put('/api/article/123', {
    title: 'Making PUT Requests with Axios',
    status: 'published'
});

// General HTTP function
const res = await axios({
    method: 'put',
    url: '/api/article/123',
    data: {
        title: 'Making PUT Requests with Axios',
        status: 'published'
    }
});

但是,如果您不熟悉 Axios 或想了解更多關於如何 這有效 - 請繼續閱讀!

HTTP 請求和動詞

現代網絡建立在 HTTP 協議和 request-response 生命週期,客戶端 請求一個資源和一個服務器 用它來回應。

HTTP 協議定義了許多具有不同意圖的方法,即 GET , POST , DELETE 等,允許客戶“陳述”他們的意圖。更常見的 HTTP 方法之一是 PUT 方法,最常用於向服務器發送數據,用於創建新資源或修補或編輯現有資源上的數據。

例如,博客的 REST API 服務可能具有允許您執行CRUD(創建、讀取、更新、刪除)的路由 article 上的操作 使用路徑 /api/article/[id] 的資源 .

發送 GET 對該路由的請求可能會返回 id 指定的文章 .發送 PUT 對該路徑的請求將編輯指定的屬性文章。這些屬性可以在請求體中指定,默認序列化為JSON格式。

使用 Axios 發送 PUT 請求

讓我們看看如何使用 Axios 庫從您的 JavaScript 應用程序發送 HTTP PUT 請求。

首先可以安裝axios 使用 yarnnpm

$ npm install axios --save
$ yarn add axios

它還可以通過許多 CDN 用於前端應用程序,例如 jsDelivr

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

安裝庫後,您需要實例化一個實例:

const axios = require('axios');

製作PUT的最簡單方法 調用是簡單地使用 put() axios的功能 實例,並提供 body JavaScript 對象形式的請求:

const res = await axios.put('/api/article/123', {
    title: 'Making PUT Requests with Axios',
    status: 'published'
});

這裡需要的唯一參數是 URL 和您希望發送的數據,在我們的例子中是我們要在文章資源上編輯的標題。

我們為保存 title 而創建的 JavaScript 對象 和 status 被序列化為 JSON,發送到請求處理程序,請求處理程序執行操作並返回結果。 body 我們發送的請求 序列化的 JSON,可以在後端輕鬆檢索。

由於發送的是 JSON - 這是一種非常通用的格式,大多數框架 無論技術堆棧如何,讀取發送的數據並將其反序列化為後端使用的任何表示都不會出現問題。

axios返回的對象,res 在這種情況下,所有調用都有一個標準架構:

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

{
    data: {},
    status: 200,
    statusText: 'OK',
    headers: {},
    config: {},
    request: {}
}

地點:

  • data :您調用的服務返回的數據 - 通常是來自 REST API 的 JSON 響應。
  • status :服務返回的 HTTP 狀態,表示操作是如何進行的 - 比如 200 (OK) , 301(永久移動) , 404(未找到) 等。
  • statusText :以人類可讀格式描述狀態代碼的 HTTP 狀態文本,例如“OK”、“Moved Permanently”或“Not Found”。
  • headers :包含服務返回的所有標頭的對象,例如“Cache-Control”。
  • config :提供給調用的配置對象(可選)。
  • request :本次調用的請求對象,ClientRequest 在 Node.js 或 XMLHttpRequest 中 在瀏覽器中。

使用 Axios 發出 PUT 請求的另一種方法是更通用的方法,您可以在其中指定參數中的 HTTP 方法。

這是通過使用 axios() 默認方法和配置對象:

const res = await axios({
    method: 'put',
    url: '/api/article/123',
    data: {
        title: 'Making PUT Requests with Axios',
        status: 'published'
    }
});

此調用的結果與 axios.put() 完全相同 之前的調用 - 唯一的區別是 axios.put() 方法是包裝通用方法的便捷方法,將 method: 'put' 字段。

axios()put()

那麼為什麼要使用一種方法而不是另一種方法呢?這可能取決於幾個因素,例如可讀性或使用該方法的上下文,但在很大程度上也取決於您的個人偏好。

更通用的 axios() call 更加靈活,因為所有選項/配置都在同一個對像中指定,從而更容易添加更多配置,例如標題或切換方法動詞。

由於 put() 方法只是包裝 axios() ,底層功能基本相同。

處理錯誤

注意: 發送請求時 - 您可能不會總是得到預期的結果。

一般來說 - 你會想要嘗試 發送請求,然後捕獲 如果在該過程中出現異常,則會稍微改變調用過程:

try {
    const { data } = await axios({
        method: 'put',
        url: '/api/article/123',
        data: {
            title: 'Making PUT Requests with Axios',
            status: 'published'
        }
    });

    console.log(data);
} catch (err) {
    if (err.response.status === 404) {
        console.log('Resource could not be found!');
    } else {
        console.log(err.message);
    }
}

這裡的主要區別是錯誤處理,它使用 response 對象內的錯誤判斷原因而不是data 調用本身返回的對象。

通常,錯誤處理比僅檢查狀態是否為單個整數更可靠 - 但是,通過這種方式,您可以根據請求的處理方式(或未處理方式)來改變邏輯流。

結論

在本文中,我們簡要介紹了 Axios 庫和 HTTP PUT 方法。

我們還展示了一些如何使用 Axios 進行 PUT 調用的示例,以及如何調用其他配置以及如何處理簡單的錯誤。


Tutorial JavaScript 教程
  1. JavaScript 測驗第 2 部分

  2. 使用 React、Gatsby 和 GraphQL 再次在 WordPress 中找到樂趣

  3. 我克隆了 dev.to

  4. const 關鍵字不會創建不可變變量

  5. Project 69 of 100 - 基本 Redux 訂閱者

  6. 生成 RedwoodJS 項目

  7. 6 個最佳 Retina Display jQuery 插件和演示

  1. AngularJS 應用程序中的單元測試簡介

  2. 構建 Jason Chess — 第 1 部分:渲染棋盤和棋子

  3. 使用 cypress-react-unit-test 示例測試 React 組件

  4. HighCharts 與 Angular - 第 1 部分 - 簡介

  5. 用於提取國家名稱的正則表達式

  6. 短路評估

  7. Firefox 3 中的某種 JavaScript 任務管理器?

  1. 如何 Dockerize 你的 React 應用程序?

  2. 使用 VUE 克隆 Reddit

  3. 我從 node_modules 回收了 10GB 的磁盤空間

  4. 使用 styled-components v5 全局樣式化 Gatsby 默認啟動器