Pengambilan Data dalam React-tutorial js-php.cn

Data Fetching in React

Pengambilan data adalah asas dalam aplikasi React, menjanakan fungsi seperti memuatkan data pengguna, memaparkan kandungan secara dinamik dan banyak lagi. React menawarkan ekosistem yang fleksibel untuk pengendalian data, dengan pelbagai perpustakaan dan pendekatan untuk dipilih bergantung pada kerumitan dan keperluan prestasi apl anda. Dalam artikel ini, kami akan meneroka beberapa kaedah utama untuk pengambilan data dalam React, termasuk API Ambil, Axios, Async/Await, React Query, SWR dan GraphQL.

1. Mengambil Data dengan API Ambil

API Ambil ialah API web terbina dalam yang menjadikan permintaan rangkaian lebih mudah dan disokong secara meluas oleh penyemak imbas moden. Ia mengembalikan Janji yang diselesaikan dengan objek Respons yang mewakili data daripada permintaan API.

Contoh

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

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Salin selepas log masuk

Bila hendak menggunakan API Ambil

Projek kecil atau projek yang mempunyai keperluan asas pengambilan data.
Kebergantungan minimum dan keserasian dengan apl berasaskan penyemak imbas.

2. Menggunakan Axios untuk Pengambilan Data

Axios ialah klien HTTP berasaskan janji untuk penyemak imbas dan Node.js yang menawarkan lebih banyak ciri daripada API Ambil, seperti pemintas permintaan dan tindak balas serta keupayaan untuk mengubah permintaan dan respons.

Contoh

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

const AxiosExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Salin selepas log masuk

Faedah Axios

Menyokong penyemak imbas lama yang mungkin tidak menyokong API Ambil sepenuhnya.
Menawarkan pengendalian ralat yang lebih baik dengan menolak kod ralat HTTP.
Membenarkan perubahan permintaan dan tindak balas yang mudah, menjadikannya popular untuk aplikasi yang lebih besar dan lebih kompleks.

3. Menggunakan Async/Await Syntax untuk Kebolehbacaan Lebih Baik

Dengan tak segerak dan menunggu, pengendalian kod tak segerak dalam JavaScript menjadi lebih bersih. Kedua-dua API Ambil dan Axios boleh digunakan dengan sintaks async/menunggu untuk menjadikan kod lebih mudah dibaca.

Contoh dengan Ambil

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

Salin selepas log masuk

Faedah Async/Await

Meningkatkan kebolehbacaan dan lebih mudah dikendalikan daripada rantai janji.
Membolehkan kami menggunakan blok cuba/tangkap untuk pengendalian ralat.

4. Pertanyaan React: Perpustakaan Pengambilan Data dan Cache yang Berkuasa

React Query mengendalikan caching, penyegerakan dan kemas kini keadaan pelayan, membolehkan anda mengambil, mengemas kini dan cache data dengan mudah. Cache data automatik React Query dan pengambilan semula menjadikannya pilihan popular untuk aplikasi yang kompleks.

Contoh

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

const FetchExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Salin selepas log masuk

Faedah React Query

Caching data dan menyegarkan latar belakang.
Bersepadu dengan baik dengan API dan mengendalikan logik cuba semula untuk kegagalan rangkaian.
Mengurangkan kod untuk mengurus keadaan pemuatan, ralat dan pengambilan semula.

5. SWR (Stale-While-Revalidate) daripada Vercel

SWR ialah satu lagi pustaka pengambilan data yang mengutamakan strategi cache dan pengesahan semula. Dibangunkan oleh Vercel, SWR memastikan data sentiasa segar dengan mengambilnya semula secara automatik di latar belakang apabila pengguna melawat semula halaman tersebut.

Contoh

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

const AxiosExample = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Salin selepas log masuk

Faedah SWR

Menggunakan pengambilan data yang mengutamakan cache dengan pengesahan semula latar belakang automatik.
Bersepadu dengan rangka kerja bahagian belakang yang popular dan API RESTful.
Sesuai untuk aplikasi yang perlu memastikan data segar dengan kod minimum.

6. Mengambil Data dengan GraphQL

GraphQL ialah bahasa pertanyaan untuk API yang memberikan lebih kawalan ke atas data yang dikembalikan. Ia membolehkan anda mengambil hanya medan yang anda perlukan, yang boleh meningkatkan prestasi dengan mengurangkan pengambilan berlebihan atau kurang pengambilan.

Contoh dengan Apollo Client

Untuk bermula dengan Apollo Client, pasangkannya dengan menjalankan npm install @apollo/client graphql.

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

Salin selepas log masuk

Faedah GraphQL

Mendayakan pengambilan data yang lebih cekap dengan kawalan ke atas medan yang diambil.
Mengurangkan beban rangkaian, terutamanya bermanfaat untuk data yang kompleks atau bersarang.
Bersepadu dengan baik dengan perpustakaan seperti Apollo Client, meningkatkan pengalaman pembangun.

Kesimpulan

Memilih kaedah yang betul untuk pengambilan data dalam React bergantung pada kerumitan projek anda, keperluan prestasi dan keutamaan anda untuk perpustakaan dan alatan. Berikut ialah ringkasan ringkas:

Ambil API: Baik untuk projek kecil; terbina dalam dan minimum.
Axios: Pelanggan HTTP yang lebih maju dengan pengendalian ralat yang lebih baik.
Async/Await: Meningkatkan kebolehbacaan dan kebolehurusan kod tak segerak.
Pertanyaan React: Sangat baik untuk caching, pengambilan semula latar belakang dan pengurusan keadaan pelayan.
SWR: Strategi basi sementara pengesahan semula, sesuai untuk pengambilan data baharu.
GraphQL dengan Apollo: Terbaik untuk keperluan data yang kompleks di mana anda memerlukan medan khusus.

Atas ialah kandungan terperinci Pengambilan Data dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!