Mengendalikan Operasi Async dalam React dengan useEffect, Promises dan Custom Hooks

Mengendalikan Panggilan Async dalam React

Mengendalikan operasi tak segerak ialah keperluan biasa dalam aplikasi React, terutamanya apabila bekerja dengan API, pangkalan data atau perkhidmatan luaran. Memandangkan operasi JavaScript seperti mengambil data daripada API atau melakukan pengiraan selalunya tidak segerak, React menyediakan alatan dan teknik untuk mengendalikannya dengan anggun.

Dalam panduan ini, kami akan meneroka cara yang berbeza untuk mengendalikan panggilan tak segerak dalam React menggunakan async/wait, Promises dan alatan khusus React yang lain.

---

1. Menggunakan useEffect untuk Panggilan Async

Cangkuk

React useEffect sesuai untuk melakukan kesan sampingan seperti mengambil data apabila komponen dipasang. Cangkuk itu sendiri tidak boleh terus mengembalikan janji, jadi kami menggunakan fungsi async di dalam kesan.

Menggunakan async/menunggu di dalam useEffect

Berikut ialah cara mengendalikan panggilan tak segerak untuk mengambil data menggunakan cangkuk useEffect.

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example API

const AsyncFetchExample = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using async/await inside useEffect
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(API_URL);
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const data = await response.json();
        setPosts(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData(); // Call the async function
  }, []); // Empty dependency array means this effect runs once when the component mounts

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1 id="Posts">Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">
            <h2 id="post-title">{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchExample;

• async/tunggu: Mengendalikan proses pengambilan berdasarkan janji.
• Pengendalian Ralat: Menangkap ralat dan memaparkan mesej yang sesuai.
• Keadaan Memuatkan: Menguruskan pemuatan dan memaparkan penunjuk pemuatan sehingga data diambil.

Mengapa menggunakan async/menunggu?

• Memudahkan kod: Mengelakkan keperluan untuk rantai .then() dan .catch().
• Lebih bersih dan lebih mudah dibaca: Janji boleh ditangani dengan cara yang lebih linear.

---

2. Menggunakan Janji untuk Operasi Async

Satu lagi pendekatan biasa ialah menggunakan Janji terus dengan then() dan catch(). Kaedah ini kurang elegan berbanding async/menunggu tetapi masih digunakan secara meluas dalam JavaScript untuk mengendalikan operasi tak segerak.

Menggunakan Janji dalam useEffect

Berikut ialah contoh menggunakan Promise dan kemudian() untuk panggilan tak segerak:

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const AsyncFetchWithPromise = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1 id="Posts">Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">
            <h2 id="post-title">{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchWithPromise;

• then(): Mengendalikan resolusi Janji yang berjaya.
• catch(): Menangkap sebarang ralat yang berlaku semasa panggilan API.
• Pengendalian Ralat: Memaparkan mesej ralat jika permintaan gagal.

---

3. Menggunakan useReducer untuk Logik Async Kompleks

Apabila anda mempunyai peralihan keadaan yang lebih kompleks atau perlu mengendalikan berbilang tindakan semasa proses async (seperti pemuatan, kejayaan, ralat), useReducer ialah alat yang hebat untuk mengurus perubahan keadaan.

Menggunakan useReducer dengan Operasi Async

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example API

const AsyncFetchExample = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using async/await inside useEffect
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(API_URL);
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const data = await response.json();
        setPosts(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData(); // Call the async function
  }, []); // Empty dependency array means this effect runs once when the component mounts

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1 id="Posts">Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">
            <h2 id="post-title">{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchExample;

• useReducer: Alat pengurusan keadaan yang lebih mantap untuk logik tak segerak yang kompleks.
• Berbilang tindakan: Mengendalikan keadaan berbeza seperti pemuatan, kejayaan dan ralat secara berasingan.

---

4. Menggunakan Cangkuk Tersuai untuk Logik Async Boleh Digunakan Semula

Dalam sesetengah kes, anda mungkin mahu menggunakan semula logik tak segerak merentas berbilang komponen. Mencipta cangkuk tersuai ialah cara terbaik untuk merangkum logik dan menjadikan kod anda lebih boleh digunakan semula.

Mencipta Cangkuk Tersuai untuk Mengambil Data

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const AsyncFetchWithPromise = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1 id="Posts">Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">
            <h2 id="post-title">{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchWithPromise;

• Cangkuk Tersuai (useFetch): Merangkumkan logik untuk mengambil data, pengendalian ralat dan keadaan pemuatan.
• Kebolehgunaan semula: Cangkuk boleh digunakan semula merentasi mana-mana komponen yang perlu mengambil data.

---

5. Kesimpulan

Mengendalikan operasi async dalam React adalah penting untuk membina aplikasi web moden. Dengan menggunakan cangkuk seperti useEffect, useReducer dan cangkuk tersuai, anda boleh mengurus tingkah laku tak segerak, mengendalikan ralat dan memastikan pengalaman pengguna yang lancar. Sama ada anda mengambil data, mengendalikan ralat atau melakukan logik async yang kompleks, React memberikan anda alat yang berkuasa untuk mengurus tugasan ini dengan cekap.

---

Atas ialah kandungan terperinci Mengendalikan Operasi Async dalam React dengan useEffect, Promises dan Custom Hooks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!