快捷導(dǎo)航

React中使用Axios進(jìn)行HTTP請(qǐng)求

更新時(shí)間：2024年11月25日 15:47:10 作者：ZHOU_WUYI

這篇文章主要為大家展示了如何在 React 中使用 Axios 進(jìn)行 HTTP 請(qǐng)求,包括 GET 和 POST 請(qǐng)求的使用,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1. 安裝 Axios

確保項(xiàng)目中已安裝 Axios，可以通過(guò)以下命令安裝：

npm install axios

2. 創(chuàng)建一個(gè)簡(jiǎn)單的 React 應(yīng)用

項(xiàng)目結(jié)構(gòu)：

src/
├── App.js
├── services/
│ └── api.js

(1) 在 services/api.js 中封裝 Axios 實(shí)例：

封裝 Axios 實(shí)例可以統(tǒng)一管理請(qǐng)求，比如添加 Base URL 和請(qǐng)求攔截器。

// src/services/api.js
import axios from 'axios';

// 創(chuàng)建 Axios 實(shí)例
const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // API 基礎(chǔ)地址
  timeout: 10000, // 超時(shí)時(shí)間
});

// 添加請(qǐng)求攔截器
api.interceptors.request.use(
  (config) => {
    // 在請(qǐng)求發(fā)送之前做一些處理，比如添加 token
    console.log('請(qǐng)求攔截器:', config);
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 添加響應(yīng)攔截器
api.interceptors.response.use(
  (response) => {
    console.log('響應(yīng)攔截器:', response);
    return response.data; // 直接返回?cái)?shù)據(jù)
  },
  (error) => {
    console.error('響應(yīng)錯(cuò)誤:', error);
    return Promise.reject(error);
  }
);

export default api;

(2) 在 App.js 中使用 Axios 發(fā)起請(qǐng)求：

// 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 請(qǐng)求：獲取數(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 請(qǐng)求：提交數(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="標(biāo)題"
          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. 功能說(shuō)明

頁(yè)面加載時(shí)，通過(guò) useEffect 調(diào)用 api.get 獲取帖子數(shù)據(jù)。

用戶可以通過(guò)表單提交新的帖子，調(diào)用 api.post 將數(shù)據(jù)發(fā)送到服務(wù)器。

請(qǐng)求和響應(yīng)都通過(guò)封裝好的 Axios 實(shí)例處理，支持?jǐn)r截器統(tǒng)一管理。

4. 效果截圖

初始狀態(tài)：顯示已有帖子。如圖：

提交后：新帖子會(huì)添加到列表頂部。如圖：

到此這篇關(guān)于React中使用Axios進(jìn)行HTTP請(qǐng)求的文章就介紹到這了,更多相關(guān)React Axios進(jìn)行HTTP請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: