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

1. 在 React 中使用 fetch() 發出 POST 請求
2. 在 React 中使用 axios 發出 POST 請求
3. 在 React 中使用純 JavaScript 發出 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);

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