Cách xây dựng một móc phản ứng tùy chỉnh cho các lệnh gọi API

Hầu hết các ứng dụng chúng ta tạo ngày nay đều sử dụng dữ liệu từ các nguồn bên ngoài thông qua các API. Họ tìm nạp dữ liệu từ một máy chủ và hiển thị nó trong giao diện người dùng của họ.

Sử dụng React, bạn có thể tạo một hook tùy chỉnh để tìm nạp dữ liệu từ một API. Với một URL, hook này sẽ trả về một đối tượng chứa dữ liệu và một thông báo lỗi tùy chọn. Sau đó, bạn có thể sử dụng hook này trong một thành phần.

Tạo một móc phản ứng tùy chỉnh

Bắt đầu bằng cách tạo một tệp mới có tên useFetch.js. Trong tệp này, hãy tạo một hàm có tên useFetch () chấp nhận một chuỗi URL làm tham số.

const useFetch = (url) => {
}

Hook sẽ thực hiện lệnh gọi API ngay lập tức sau khi nó được gọi. Bạn có thể sử dụng hook useEffect () cho việc này.

Đối với các lệnh gọi API thực tế, hãy sử dụng API tìm nạp. API này là một giao diện dựa trên lời hứa cho phép bạn thực hiện các yêu cầu và nhận phản hồi qua HTTP một cách không đồng bộ.

Trong hook tùy chỉnh useFetch (), hãy thêm phần sau.

import { useEffect, useState } from "react";
const useFetch = (url) => {
const [data, setdata] = useState(null);
const [loading, setloading] = useState(true);
const [error, seterror] = useState("");
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => {
seterror(data.error)
setdata(data.joke)
setloading(false)
})
}, [url]);
return { data, loading, error };
};
export default useFetch;

Trong hook này, trước tiên bạn đang khởi tạo trạng thái của ba giá trị:

• dữ liệu: Giữ phản hồi API.
• error: Giữ một thông báo lỗi nếu xảy ra lỗi.
• loading: Giữ một giá trị boolean cho biết liệu nó đã tìm nạp dữ liệu API hay chưa. Khởi tạo trạng thái tải thành true. Khi API trả về dữ liệu, hãy đặt nó thành false.

Hook useEffect () lấy chuỗi URL làm đối số. Điều này là để đảm bảo nó chạy mỗi khi URL thay đổi.

Hàm useFetch () sẽ trả về một đối tượng chứa các giá trị dữ liệu, tải và lỗi.

Sử dụng một móc tùy chỉnh React

Để sử dụng hook tùy chỉnh useFetch () mà bạn vừa tạo, hãy bắt đầu bằng cách nhập nó:

const useFetch = require("./useFetch")

Sau đó sử dụng nó như sau:

const {data, loading, error} = useFetch(url)

Để chứng minh, hãy xem xét thành phần Truyện cười sau:

const Jokes = () => {
const url = "<https://sv443.net/jokeapi/v2/joke/Programming?type=single>";
const { data, loading, error } = useFetch(url);
if (loading) return (
<div>Loading...</div>
)
return (
<div>
{error && <div>{error}</div>}
{data && <div>{<div>{data}</div>}</div>}
</div>
);
};
export default Jokes;

Nó gọi móc useFetch () với URL tới API trò đùa và nhận các giá trị dữ liệu, tải và lỗi.

Để hiển thị thành phần Trò đùa, trước tiên hãy kiểm tra xem Đang tải có đúng không. Nếu đúng như vậy, hãy hiển thị câu lệnh “Đang tải…” nếu không sẽ hiển thị dữ liệu và thông báo lỗi nếu có.

Tại sao sử dụng các móc phản ứng tùy chỉnh?

Cũng giống như bạn đã sử dụng hook tùy chỉnh useFetch () trong thành phần này, bạn có thể sử dụng lại nó trong các thành phần khác. Đó là vẻ đẹp của việc ngoại hóa logic trong hook thay vì viết nó trong từng thành phần.

Hooks là một tính năng mạnh mẽ của React mà bạn có thể sử dụng để cải thiện tính mô-đun cho mã của mình.