Создание простого React Cloope API Call с помощью TypeyScript

Недавно я начал строить свои собственные крючки в реакции, и я хотел поделиться тем, который нашел особенно полезным.

Создание вызовов API – это то, что я делаю часто, поэтому один из первых крючков, которые я отправил, был простым крюком, который делает вызов API, возвращает данные или сообщение об ошибке, если что-то пойдет не так.

Вот полный файл крючка, я проведем остальную часть статьи, проходящей через нее, сложным.

import { useState } from "react"

import { getUser } from "../api/api"

interface User {
  name: string;
  email: string;
  age: number;
}

export default (): [(id: string) => void, User, string] => {
  const [user, setUser] = useState({ name: "", email: "", age: 0 });
  const [errorMsg, setErrorMsg] = useState("");

  const getUserTest = async (id: string) => {
    try {
      const user = await getUser(`/user/${id}`);
      setUser(user);
      setErrorMsg("");
    } catch (error) {
      setErrorMsg(error);
    }
  };

  return [getUserTest, user, errorMsg];
};

Первая строка крюка является одним из самых важных

export default (): [(id: string) => void, User, string] =>

[(ID: String) => Void, пользователь, строка] Указывает все типы возврата, которые обеспечивает крючок. Thmyscript Wont поживает, если вы не предоставите это, но без него нет типов возврата, будет неверно истолкован, и вы не сможете вызвать крючок .so Обязательно уточните ваши типы возврата для функций.

Вторая часть указывает данные, которые мы хотим вернуться.

const [user, setUser] = useState({ name: "", email: "", age: 0 });
const [errorMsg, setErrorMsg] = useState("");

В-третьих, у нас есть простая асинхронная функция, чтобы пойти и получить наш пользователь.

const getUserTest = async (id: string) => {
    try {
      const user = await getUser(`/user/${id}`);
      setUser(user);
      setErrorMsg("");
    } catch (error) {
      setErrorMsg(error.message);
    }
  };

Наконец, у нас есть наш массив предметов, которые мы хотим вернуться. Обратите внимание, как каждое значение слева направо соответствует типам возврата в первом разделе.

return [getUserTest, user, errorMsg];

И это все, что есть к этому. Теперь вы можете импортировать крючок и называть это.

import * as React from "react";
import "./styles.css";
import useTest from "./hook";

export default function App() {
  const [getUser, user, errorMessage] = useTest();
  return (
    
      Simple API Hook Demo
      
      
        {user.name}
        {user.email}
        {user.age}

        {errorMessage}
      
    
  );
}

Вы можете найти ссылку на демонстрацию Sandbox здесь

Это довольно простой пример, в моей следующей статье я покажу, чтобы сделать этот крюк Generic, чтобы вы могли использовать его для нескольких вызовов API.

Simple API Hook Demo

{user.name}

{user.email}

{user.age}

{errorMessage}

Читайте ещё по теме: