在 React 中發布 HTTP 請求
簡介
在使用 API 時，我們經常希望將數據發送到服務器進行處理。例如，如果我們有一個待辦事項列表並想要添加到其中，可能通過表單提交，我們使用 POST HTTP 請求發送帶有有效負載的請求以進行處理和潛在的持久性。
使用 Fetch API，使用 React 發送 POST HTTP 請求非常簡單：
// Using Fetch API
fetch('/myserver.endpoint', {
method: 'POST',
body: JSON.stringify({
// Add parameters here
})
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((data) => {
console.log(data);
// Handle data
})
.catch((err) => {
console.log(err.message);
});
Axios 為我們提供了發送 HTTP POST 請求的優雅替代方案：
// Using Axios - ensure you first install the package
axios.post('/myserver.endpoint', {
// Add parameters here
})
.then((response) => {
console.log(response.data);
// Handle data
})
.catch((error) => {
console.log(error);
})
如果您想詳細了解這些方法及其工作原理 - 請閱讀指南的其餘部分！
什麼是 POST HTTP 請求？
顧名思義，POST 請求用於將數據發佈到端點 - 然後通常處理它並將其保存在數據庫中。這些數據可能來自表單、保存在對像中或以其他方式獲取 - 但通常會轉換為 JSON 表示形式以供 REST API 使用。
Fetch API 使發送帶有任何動詞的 HTTP 請求變得簡單 （內置）和庫，如 Axios . Fetch API 是一種用於執行 HTTP 請求的內置瀏覽器方法，而 Axios 是一個外部包，我們必須在使用前安裝在我們的項目中。
兩種方法各有優缺點，但需要注意的是它們可以處理標準的 HTTP 動詞 - POST , GET , PUT , PATCH , DELETE .
注意： 如前所述，我們將學習如何執行 POST 使用 Fetch API 和 Axios 方法的功能組件請求，然後使用 JSON Placeholder Free Fake Posts REST API 在基於類的組件中。
在我們的實例中，我們將處理已經從模擬 API 獲取的帖子列表。我們將創建一個包含新帖子的標題和正文的表單，一旦提交，就會向模擬服務器發送一個 POST 請求進行處理：
import { useState, useEffect } from 'react';
const App = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
return (
<>
<div className="add-post-container">
<form>
<input type="text" className="form-control" />
<textarea className="form-control" cols="10" rows="8"></textarea>
<button type="submit">Add Post</button>
</form>
</div>
<div className="posts-container">
{posts.map((post) => {
return (
<div className="post-card" key={post.id}>
<h2 className="post-title">{post.title}</h2>
<p className="post-body">{post.body}</p>
<div className="button">
<div className="delete-btn">Delete</div>
</div>
</div>
);
})}
</div>
</>
);
};
export default App;
現在讓我們使表單功能化，以便在提交表單後我們可以將數據添加到我們網站上的帖子列表中。
如何在 React 的功能組件中執行 POST HTTP 請求
由於 React 中引入了鉤子，我們現在可以在功能組件中執行 HTTP 請求。以前，功能組件只用於渲染 UI。
我們現在使用 React 鉤子，例如 useState()，而不是像使用基於類的組件那樣在構造方法中使用狀態對象 在將數據傳遞到原始數據之前存儲我們的數據。
如何使用 Fetch API 在 React 的功能組件中執行 POST HTTP 請求
因為 Fetch API 是一個內置的瀏覽器方法，它返回一個 Promise ，我們使用 .then() 和 .catch() 處理成功和失敗的方法。它還接受一個強制參數，即我們想要 POST 數據的資源/API 的 URL，以及一個指示 HTTP 請求的參數，在我們的例子中是 POST ：
import { useState, useEffect } from 'react';
const App = () => {
const [posts, setPosts] = useState([]);
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
// ... Fetch posts here
// Handle psosts request
const handleSubmit = (e) => {
e.preventDefault();
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: title,
body: body,
userId: Math.random().toString(36).slice(2),
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then((res) => res.json())
.then((post) => {
setPosts((posts) => [post, ...posts]);
setTitle('');
setBody('');
})
.catch((err) => {
console.log(err.message);
});
};
return (
// ... JSX here
);
};
export default App;
在上面的代碼中，我們創建了一個鏈接到表單的方法，以便在單擊表單的提交按鈕時觸發它。我們首先使用 e.preventDefault() 防止提交表單時頁面重新加載，通常 您想要發生的事情，但在我們的演示中效果不佳：
const handleSubmit = (e) => {
e.preventDefault();
};
查看fetch() 調用，我們將URL作為第一個強制參數添加，第二個參數接受請求方法（POST），body , 和 header ：
body- 包含我們要發送到 API 端點的數據，我們必須 stringify ，將其轉換為基於文本的 JSON 表示。header- 指定內容類型，在我們的例子中是application/json，因為我們的有效負載表示為 JSON 字符串：
const handleSubmit = (e) => {
e.preventDefault();
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: title,
body: body,
userId: Math.random().toString(36).slice(2),
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
};
最後，因為這個方法返回一個Promise ，我們將從中提取 JSON 內容（服務器的響應），更新 posts 狀態以包含新數據。
為了處理錯誤，我們還使用了 .catch() 方法：
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
const handleSubmit = (e) => {
e.preventDefault();
fetch({...})
.then((res) => res.json())
.then((post) => {
setPosts((posts) => [post, ...posts]);
setTitle('');
setBody('');
})
.catch((err) => {
console.log(err.message);
});
};
警告： 通常，您不會在前端存儲和處理數據 就像我們一樣，但由於我們正在使用的模擬 API 實際上不會保存並返回新帖子 - 我們人為地將它添加到它確實從第一個 GET 請求返回的列表中。一旦帖子存儲在數據庫中 - 我們可以向後端發出另一個請求以提供響應以顯示給用戶。這也是表單提交的默認行為是重新加載頁面的原因——這會觸發初始的 fetch() 自動獲取請求並在舊帖子旁邊顯示新帖子。
如何在 React 的功能組件中使用 Axios 執行 POST HTTP 請求
我們在上一節中解釋瞭如何使用 Fetch API 執行 POST 請求。現在，讓我們修改 handleSubmit() 方法並使用 Axios 執行 POST 請求。
Axios 是一個 HTTP 客戶端庫，它使用 Promise 來輕鬆發送異步 HTTP 請求 到 REST 端點。因為它是一個外部庫，所以我們必須先將它安裝到我們的項目中，方法是在我們的項目目錄下運行以下命令：
$ npm install axios
一旦我們成功安裝了 Axios，我們就可以繼續執行我們的 POST 請求：
const handleSubmit = (e) => {
e.preventDefault();
axios
.post('https://jsonplaceholder.typicode.com/posts', {
title: title,
body: body,
})
.then((res) => {
setPosts((posts) => [res.data, ...posts]);
setTitle('');
setBody('');
})
.catch((err) => {
console.log(err.message);
});
};
查看上面的代碼，它比 Fetch API 更容易並且需要更少的語法，因為我們不再需要轉換為 JSON、使用標頭甚至對我們的數據進行字符串化。這個樣板被 Axios 抽象掉了。
如何在 React 的類組件中執行 POST HTTP 請求
類組件中 POST 請求的處理方式與函數式組件不同，因為我們不再使用 React 鉤子，而是使用 state 對象。
如何使用 Fetch API 在 React 的類組件中執行 POST HTTP 請求
該請求與功能組件的請求非常相似。我們會發現一些差異的唯一區域是在 state 中存儲數據時 當使用 state 值，因為我們不再使用 useState() 鉤子：
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
// ...
handleSubmit = (e) => {
e.preventDefault();
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: this.state.title,
body: this.state.body,
userId: Math.random().toString(36).slice(2),
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((data) => {
this.setState({ posts: [data, ...this.state.posts] });
this.setState({ title: '' });
this.setState({ body: '' });
})
.catch((err) => {
console.log(err.message);
});
};
render() {
const { posts, title, body } = this.state;
return (
// ... JSX here
);
}
}
export default App;
這一次，我們不再使用 const 聲明方法 關鍵詞。而是在它們前面加上 this .單擊表單的提交按鈕時將觸發此方法。由於它是一個表單，我們從使用 e.preventDefault() 開始 防止表單提交時頁面重新加載：
handleSubmit = (e) => {
e.preventDefault();
};
就像我們之前了解的那樣，Fetch API 接受兩個參數。第一個是 URL，第二個包含請求方法等選項（POST ), body ，這是我們發布的信息（必須是字符串），然後是 headers ：
handleSubmit = (e) => {
e.preventDefault();
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: this.state.title,
body: this.state.body,
userId: Math.random().toString(36).slice(2),
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
};
知道這是一個承諾，我們現在可以附加 .then() 處理成功的方法和 .catch() HTTP 請求出錯或失敗時的處理方法。
如何在 React 的類組件中使用 Axios 執行 POST HTTP 請求
我們已經看到瞭如何執行 POST 基於類的組件中的 HTTP 請求。這個和Axios很像，我們只需要安裝Axios，然後替換handleSubmit() 方法，所以我們現在使用 Axios 而不是 Fetch API：
handleSubmit = (e) => {
e.preventDefault();
axios
.post('https://jsonplaceholder.typicode.com/posts', {
title: this.state.title,
body: this.state.body,
userId: 1,
})
.then((response) => {
this.setState({ posts: [response.data, ...this.state.posts] });
this.setState({ title: '' });
this.setState({ body: '' });
})
.catch((error) => console.log(error));
};
結論
在本指南中，我們學習瞭如何使用 React 中的兩種主要方法來執行 POST HTTP 請求。我們還看到瞭如何在函數式組件和基於類的組件中完成它們，因此無論我們的項目中使用什麼，本文都可以為我們服務。
