在 React 中發出 POST 請求的不同方法

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中使用 fetch() 發出 POST 請求
  2. 在 React 中使用 axios 發出 POST 請求
  3. 在 React 中使用純 JavaScript 發出 POST 請求
在 React 中發出 POST 請求的不同方法

在 React 中構建複雜的 Web 應用程式時,使用 API 是必不可少的。大多數時候,應用程式會發出 get 請求以從 API 讀取資料。

有時需要發出 post 請求,以更新 API 上的資料。本文探討了如何在 React 中發出 post 請求。

在 React 中有多種方式可以與 API 互動。在本文中,我們想討論最常見的方法。

React 庫沒有提供一種特定的解決方案來進行 REST 呼叫。任何與 JavaScript 相容的 AJAX 庫也可以在 React 中使用。

在 React 中使用 fetch() 發出 POST 請求

Fetch API 是在 JavaScript 中進行 REST 呼叫的最常見和最簡單的方法。從 API URL 讀取值就像使用 API URL 呼叫 fetch() 一樣簡單。

發出 POST 請求稍微複雜一些,但仍然相當容易。讓我們來看一個簡單的 fetch 請求示例。

fetch('https://samplewebsite.com/API/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    parameterOne: 'something',
    parameterTwo: 'somethingElse'
  })
});

這是一個使用 fetch() 發出的簡單 POST 請求的示例。閱讀官方文件以瞭解有關 Fetch API 的更多資訊,例如潛在引數列表。

在 React 中使用 axios 發出 POST 請求

這是在 React 中發出請求的另一個流行包。它本身並不包含在 JavaScript 中,因此你必須安裝它才能傳送請求。

要安裝 axios 包,請在 npm 中執行以下命令。

npm install axios --save

安裝後,你可以發出看起來比 Fetch API 更簡單的 POST 請求。

axios.post('/endpoint', {
    name: 'John Doe',
  })
  .then(function (response) {
    return response;
  })
  .catch(function (error) {
    return error;
  });

這是使用 axios 發出 POST 請求的基本示例。

在 React 中使用純 JavaScript 發出 POST 請求

在 JavaScript 中,向 API 傳送任何請求的傳統方式是使用 XMLHttpRequest() 介面。你可以建立此物件的例項並將其儲存在變數中。

var req = new XMLHttpRequest();
req.open('POST', '/endpoint', true);
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
req.send(data);

它可能看起來不那麼簡單,但它完成的結果與使用 fetchaxios 進行的 POST 呼叫相同。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn