欧美放荡的少妇,欧美精品黑人粗大

))} ); }; export default Swr;

2. 使用 JavaScript 的 Fetch() 方法

fetch() 方法是從 API 獲取數(shù)據(jù)的簡單且常用的方法。它無需額外的庫支持，直接使用 JavaScript 原生功能。

import { useState, useEffect } from 'react';

const Fetch = () => {
  const [photos, setPhotos] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then(res => res.json())
      .then(data => setPhotos(data));
  }, []);

  return (
    
      {photos.map(photo => (
        
      ))}
    
  );
};

export default Fetch;

3. 使用 React Query 庫

React Query（也稱為 TanStack Query）是一種用于在 React 應(yīng)用中管理數(shù)據(jù)的工具。它能自動(dòng)處理數(shù)據(jù)的獲取、緩存和同步。

import { useQuery } from '@tanstack/react-query';

const Query = () => {
  const { data: comments, isLoading, error } = useQuery({
    queryFn: () => fetch('https://jsonplaceholder.typicode.com/comments?_limit=10').then(res => res.json()),
    queryKey: ['comments'],
  });

  if (isLoading) return Loading...;
  if (error) return Error: error fetching;

  return (
    
      Email address of users
      {comments.map(comment => (
        {comment.id}. {comment.email}
      ))}
    
  );
};

export default Query;

4. 使用 Axios 庫

Axios 是一個(gè)流行的第三方庫，用于在瀏覽器和 Node.js 中進(jìn)行 HTTP 請求。

import { useState, useEffect } from 'react';
import axios from 'axios';

const Axios = () => {
  const [meals, setMeals] = useState([]);

  useEffect(() => {
    axios.get('https://www.themealdb.com/api/json/v1/1/random.php')
      .then(res => setMeals(res.data.meals));
  }, []);

  return (
    
      {meals.map(meal => (
        
      ))}
    
  );
};

export default Axios;

5. 使用自定義 Hook – useFetch

自定義 Hook 是 React 中的一種工具，允許開發(fā)者將邏輯封裝并在多個(gè)組件中重用。

import useFetch from "react-fetch-hook";

const UseFetch = () => {
  // 使用自定義 Hook 進(jìn)行數(shù)據(jù)獲取
  const { isLoading, data, error } = useFetch("https://jsonplaceholder.typicode.com/users");

  if (isLoading) return Loading...;
  if (error) return Error occurred: {error.message};

  return (
    
      {data.map(user => (
        {user.name}
      ))}
    
  );
};

export default UseFetch;

FAQ

問：如何選擇合適的 API 獲取方法？
- 答：選擇方法取決于項(xiàng)目需求和復(fù)雜性。對(duì)于簡單請求，fetch() 是不錯(cuò)的選擇。對(duì)于更復(fù)雜的狀態(tài)管理，React Query 或 SWR 更適合。
問：使用 SWR 有哪些優(yōu)勢？
- 答：SWR 提供了數(shù)據(jù)緩存、錯(cuò)誤處理和自動(dòng)同步等功能，提升了應(yīng)用的性能和用戶體驗(yàn)。
問：React Query 與 Axios 有何不同？
- 答：React Query 專注于數(shù)據(jù)獲取和緩存，而 Axios 更關(guān)注 HTTP 請求的簡化。兩者可以結(jié)合使用以實(shí)現(xiàn)更強(qiáng)大的功能。