Promise Hook: React Hook Thực hiện Việc Lấy Dữ liệu bằng Promises Dễ dàng

promise-hook

Cài đặt

Cài đặt nó bằng yarn:

yarn add promise-hook

Hoặc cài đặt nó bằng npm:

npm i promise-hook --save

Demo

Cách đơn giản nhất để bắt đầu làm việc với promise-hook là sử dụng đoạn mã CodeSandbox sau: https://codesandbox.io/s/ykmklm6m21

Lấy dữ liệu đơn giản

Để lấy dữ liệu, bạn cần truyền một hàm trả về Promise như đối số đầu tiên vào hook usePromise. Nó sẽ trả về cho bạn các dữ liệu liên quan như dữ liệu đã được giải quyết, trạng thái yêu cầu hoặc lỗi nếu có.

Tùy chọn resolve được sử dụng để bắt đầu việc lấy dữ liệu khi thành phần được gắn kết.

import React from "react";
import { usePromise } from "promise-hook";

const Movies = () => {
  const { isLoading, data } = usePromise(fetchMovies, { resolve: true });

  return isLoading ? (
    <div>Loading...</div>
  ) : (
    <div>
      {data.map(movie => (
        <div key={movie.id}>{movie.title}</div>
      ))}
    </div>
  );
};

const fetchMovies = () =>
  fetch(`http://your-amazing-api.com/movies`).then(res => res.json());

Truyền đối số

Để truyền một số đối số vào hàm Promise, bạn cần sử dụng bao bọc hàm mũi tên và truyền đối số cần thiết từ một closure.

Mặc định, khi tùy chọn resolve được kích hoạt, việc lấy dữ liệu chỉ được bắt đầu trong lần hiển thị đầu tiên. Nhưng bạn có thể kiểm soát nó bằng cài đặt resolveCondition. Nếu một mảng biến được truyền sẽ thay đổi – việc lấy dữ liệu sẽ được bắt đầu lại.

import React from "react";
import { usePromise } from "promise-hook";

const Movies = ({ category }) => {
  const { isLoading, data } = usePromise(() => fetchMovies(category), {
    resolve: true,
    resolveCondition: [category]
  });

  return isLoading ? (
    <div>Loading...</div>
  ) : (
    <div>
      {data.map(movie => (
        <div key={movie.id}>{movie.title}</div>
      ))}
    </div>
  );
};

const fetchMovies = category =>
  fetch(`http://your-amazing-api.com/movies/${category}`).then(res =>
    res.json()
  );

Lấy dữ liệu khi cần

Khi bạn cần gửi yêu cầu nào đó khi cần chứ không phải khi thành phần được gắn kết, bạn có thể sử dụng hàm request trả về từ hook usePromise.

Sau khi gọi hàm đó, việc lấy dữ liệu sẽ được bắt đầu và các biến dữ liệu như isLoading v.v. sẽ được cập nhật tương ứng.

import React from "react";
import { usePromise } from "promise-hook";
import { Form, Input, Button } from "./Form";

const SignUp = () => {
  const { isLoading, request } = usePromise(signUp);

  return (
    <Form onSubmit={data => request(data)}>
      <Input type="text" name="full_name" />
      <Input type="text" name="email" />
      <Input type="password" name="password" />
      <Button>{isLoading ? "Signing up..." : "Sign up"}</Button>
    </Form>
  );
};

const signUp = data =>
  fetch(`http://your-amazing-api.com/users`, {
    method: "POST",
    body: data
  }).then(res => res.json());

Xử lý lỗi

Khi xảy ra lỗi trong yêu cầu, biến error sẽ được điền với đối tượng lỗi tương ứng. Bạn có thể sử dụng nó sau đó để hiển thị thông báo lỗi thích hợp trong giao diện người dùng.

import React from "react";
import { usePromise } from "promise-hook";

const Movies = () => {
  const { isLoading, data, error } = usePromise(fetchMovies, {
    resolve: true
  });

  return isLoading ? (
    <div>Loading...</div>
  ) : error ? (
    <div>Error loading movies - {error.message}</div>
  ) : (
    <div>
      {data.map(movie => (
        <div key={movie.id}>{movie.title}</div>
      ))}
    </div>
  );
};

const fetchMovies = () =>
  fetch(`http://your-amazing-api.com/movies`).then(res => res.json());

Cảm ơn bạn!

CÔNG VIỆC CẦN LÀM

• Hủy Promise.
• Lưu cache.
• Đặt lại / Cập nhật trạng thái phản hồi.
• Hỗ trợ Middleware.

Thông tin tải xuống:

Tác giả: aiven715
Nguồn: https://github.com/aiven715/promise-hook

Giấy phép: MIT license