나는 당신의 삶을 훨씬 더 쉽게 만들어 줄 RESTful HTTP 클라이언트를 만들었습니다.

이 글을 읽는 대부분의 사용자는 자체 API든 외부 API든 애플리케이션에서 API로 HTTP 요청을 만드는 데 이미 익숙하고 이를 사용하고 있을 것입니다axios.

오늘은 제가 axios 위에 구축한 새로운 npm 패키지인 4rest를 소개하려고 합니다. 이 패키지는 API에 대한 HTTP 요청을 쉽고 빠르게 하기 위한 앱의 모든 기능을 설정하고 이를 체계적으로 구성할 수 있도록 도와줍니다. API의 데이터 모델을 기반으로 서비스로 분할하여 가능한 한.

기본 사용 예를 살펴보겠습니다.

1) 먼저 API 기본 URL 및 기타 관련 구성을 사용하여 Forest 인스턴스를 생성합니다.

import forest from "4rest";

export const instance = forest.create({ axiosSettings: { baseURL: "http://localhost:5000" } });


2) 그런 다음 방금 만든 인스턴스를 사용하여 Forest Service를 만듭니다.

import { instance } from "./forestInstance";
import { UserWithId, User } from "./types";

export const userService = instance.createService<UserWithId, User>("user");


그게 다야!
이 간단한 2단계를 수행하는 것만으로도 요청 페이로드 및 응답 데이터 유형이 포함된 API를 호출하기 위한 총 9가지 함수를 얻을 수 있습니다.
  • getAll
  • getById
  • deleteAll
  • deleteById
  • post
  • patch
  • patchById
  • put
  • putById

  • 앱에서 서비스 메서드를 사용하는 몇 가지 예를 살펴보겠습니다.

  • 가져 오기

  • // GET http://localhost:5000/user
    async function getUsers() {
      const users: User[] = (await userService.getAll()).data;
    }
    
    // GET http://localhost:5000/user/:id
    async function getUserById(id: string) {
      const user: User = (await userService.getById(id)).data;
    }
    



  • 게시하다

  • // POST http://localhost:5000/user
    async function createUser(newUser: User) {
      const userCreated: User = (await userService.post(newUser)).data;
    }
    



  • 반점

  • // PATCH http://localhost:5000/user
    async function updateUser(partialUser: Partial<User>) {
      const updatedUser: User = (await userService.patch(partialUser)).data;
    }
    
    // PATCH http://localhost:5000/user/:id
    async function updateUserById(id: ObjectId, partialUser: Partial<User>) {
      const updatedUser: User = (await userService.patchById(id, partialUser)).data;
    }
    


    이것은 4rest를 사용하는 방법에 대한 가장 기본적인 예일 뿐이지만 서비스 및 인스턴스를 구성하는 더 많은 옵션이 있으므로 zod 페이로드 및 응답 데이터 유형 유효성 검사, 메서드 경로 구성과 같이 이 문서에 표시된 것보다 훨씬 더 많은 작업을 수행할 수 있습니다. , 사용자 지정 메서드가 포함된 사용자 지정 서비스, onSuccess 및 onError 처리 요청 등.

    더보기:



    4rest Full docs and source code on Github

    4rest NPM Page

    이 패키지가 유용하기를 바랍니다.
    패키지에 대한 피드백과 향후 개선을 위한 제안을 듣고 싶습니다 😀

    좋은 웹페이지 즐겨찾기