React中使用Axios進行HTTP請求
下面是一個案例,展示如何在 React 中使用 Axios 進行 HTTP 請求,包括 GET 和 POST 請求的使用。
1. 安裝 Axios
確保項目中已安裝 Axios,可以通過以下命令安裝:
npm install axios
2. 創(chuàng)建一個簡單的 React 應用
項目結構:
src/
├── App.js
├── services/
│ └── api.js
(1) 在 services/api.js 中封裝 Axios 實例:
封裝 Axios 實例可以統(tǒng)一管理請求,比如添加 Base URL 和請求攔截器。
// src/services/api.js import axios from 'axios'; // 創(chuàng)建 Axios 實例 const api = axios.create({ baseURL: 'https://jsonplaceholder.typicode.com', // API 基礎地址 timeout: 10000, // 超時時間 }); // 添加請求攔截器 api.interceptors.request.use( (config) => { // 在請求發(fā)送之前做一些處理,比如添加 token console.log('請求攔截器:', config); return config; }, (error) => { return Promise.reject(error); } ); // 添加響應攔截器 api.interceptors.response.use( (response) => { console.log('響應攔截器:', response); return response.data; // 直接返回數(shù)據(jù) }, (error) => { console.error('響應錯誤:', error); return Promise.reject(error); } ); export default api;
(2) 在 App.js 中使用 Axios 發(fā)起請求:
// src/App.js import React, { useEffect, useState } from 'react'; import api from './services/api'; function App() { const [posts, setPosts] = useState([]); const [newPost, setNewPost] = useState({ title: '', body: '' }); const [loading, setLoading] = useState(false); // GET 請求:獲取數(shù)據(jù) useEffect(() => { const fetchPosts = async () => { setLoading(true); try { const data = await api.get('/posts'); setPosts(data.slice(0, 5)); // 僅展示前 5 條 } catch (error) { console.error('獲取帖子失敗:', error); } finally { setLoading(false); } }; fetchPosts(); }, []); // POST 請求:提交數(shù)據(jù) const handleSubmit = async (e) => { e.preventDefault(); try { const data = await api.post('/posts', newPost); setPosts([data, ...posts]); // 添加新帖子到列表 setNewPost({ title: '', body: '' }); // 清空表單 } catch (error) { console.error('提交帖子失敗:', error); } }; return ( <div style={{ padding: '20px' }}> <h1>Axios 示例</h1> {/* 加載狀態(tài) */} {loading && <p>加載中...</p>} {/* 顯示帖子列表 */} <ul> {posts.map((post) => ( <li key={post.id}> <h3>{post.title}</h3> <p>{post.body}</p> </li> ))} </ul> {/* 添加新帖子 */} <form onSubmit={handleSubmit} style={{ marginTop: '20px' }}> <input type="text" placeholder="標題" value={newPost.title} onChange={(e) => setNewPost({ ...newPost, title: e.target.value })} required style={{ marginRight: '10px' }} /> <textarea placeholder="內(nèi)容" value={newPost.body} onChange={(e) => setNewPost({ ...newPost, body: e.target.value })} required style={{ marginRight: '10px' }} /> <button type="submit">提交</button> </form> </div> ); } export default App;
3. 功能說明
頁面加載時,通過 useEffect 調(diào)用 api.get 獲取帖子數(shù)據(jù)。
用戶可以通過表單提交新的帖子,調(diào)用 api.post 將數(shù)據(jù)發(fā)送到服務器。
請求和響應都通過封裝好的 Axios 實例處理,支持攔截器統(tǒng)一管理。
4. 效果截圖
初始狀態(tài):顯示已有帖子。如圖:
提交后:新帖子會添加到列表頂部。如圖:
到此這篇關于React中使用Axios進行HTTP請求的文章就介紹到這了,更多相關React Axios進行HTTP請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
關于react-router/react-router-dom v4 history不能訪問問題的解決
這篇文章主要給大家介紹了關于react-router/react-router-dom v4 history不能訪問問題的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧。2018-01-01ForwardRef?useImperativeHandle方法demo
這篇文章主要為大家介紹了ForwardRef?useImperativeHandle方法demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03react-native使用react-navigation進行頁面跳轉導航的示例
本篇文章主要介紹了react-native使用react-navigation進行頁面跳轉導航的示例,具有一定的參考價值,有興趣的可以了解一下2017-09-09React項目中fetch實現(xiàn)跨域接收傳遞session的解決方案
這篇文章主要介紹了React項目中fetch實現(xiàn)跨域接收傳遞session的解決方案,本次項目使用了react框架,同時使用fetch取代ajax作為獲取接口數(shù)據(jù)的交互方法,下面就對這次問題的解決做個總結,需要的朋友可以參考下2022-04-04使用React hook實現(xiàn)remember me功能
相信大家在使用 React 寫頁面的時候都遇到過完成 Remember me 的需求吧!本文就將這個需求封裝在一個 React hook 中以供后續(xù)的使用,覺得有用的同學可以收藏起來以備不時之需,感興趣的小伙伴跟著小編一起來看看吧2024-04-04