- 설명

Angular에서 서비스란 무엇입니까?

왜 Rxjs입니까?

React 또는 Vue에서 서비스를 생성하는 방법

React 구성 요소에서 서비스를 사용하는 방법

1. Angular에서 서비스란 무엇입니까?

서비스는 서로 모르는 클래스 간에 정보를 공유할 수 있는 좋은 방법입니다. 서비스를 사용하면 다음을 수행할 수 있습니다.

앱의 모든 구성 요소에서 데이터 가져오기

Rxjs 연산자 및 기타 사용.....

상태 관리로 사용(주제 사용)

깨끗하고 아름다운 코드를 가지고

왜 Rxjs

RxJS는 모든 프레임워크 또는 Pure Javascripta와 함께 사용할 수 있습니다.
이는 다음 코드가 Vue.js 또는 바닐라에서 작동함을 의미합니다.

RxJS는 관찰 가능한 시퀀스를 사용하여 비동기 및 이벤트 기반 프로그램을 구성하기 위한 라이브러리입니다.

RxJS는 수학, 변환, 필터링, 유틸리티, 조건부, 오류 처리, 반응형 프로그래밍과 함께 사용할 때 삶을 쉽게 만들어주는 조인 범주에서 방대한 연산자 모음을 제공합니다.

3. React 또는 Vue에서 서비스를 만드는 방법

다음 라이브러리를 설치합니다.

$ npm install axios rxjs axios-observable

모든 API 서비스를 포함할 폴더를 만듭니다. 일반적으로 이름을 지정합니다services.
또한 src/srvices에 생성합니다. 원하는 모든 위치에 생성하는 것은 중요하지 않습니다.

새 .ts 또는 .js 파일 만들기

import Axios, { AxiosObservable } from "axios-observable";

class TaskService {

    private static _instance: TaskService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

/////...code here

}


export const _TaskService=TaskService.Instance;

그래서 여기서 우리는 나중에 사용할 수 있도록 싱글톤 클래스를 만듭니다task.ts. 또한 각 구성 요소에서 클래스의 개체를 만드는 것보다 낫습니다.

3. API 호출을 작성하면 간단하게 작성하겠습니다Subjects.

import Axios, { AxiosObservable } from "axios-observable";

class TaskService {

    private static _instance: TaskService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

  indexTask():AxiosObservable<any> {
   return Axios.get<any(`https://example.com/api/index`);
    }

  showTask(id:number):AxiosObservable<any> {
   return Axios.get<any(`https://example.com/api/show/${id}`);
    }

  storeTask(data:any):AxiosObservable<any> {
   return Axios.post<any(`https://example.com/api/store`,data);
    }

  updateTask(id:number,data:any):AxiosObservable<any> {
   return Axios.put<any(`https://example.com/api/update/${id}`,data);
    }

  deleteTask(id:number):AxiosObservable<any> {
   return Axios.delete<any(`https://example.com/api/delete/${id}`);
    }

}




export const _TaskService=TaskService.Instance;

그리고 우리는 여기서 끝났습니다.

4. React 컴포넌트에서 Service를 사용하는 방법

import { useEffect, useState } from "react";
import { _TaskService } from "src/services/Task.Service";

const Tasks = () => {

  const [tasks, settasks] = useState([]);

  useEffect(() => {

    _TaskService.indexTask().subscribe({
      next: (res) => settasks(res.data),
      error: (err) => console.log(err.response),
      complete: () => {},
    });

    return () => {};
  }, []);

  return (
    <div>
      {tasks.map((task: any, index: number) => {
        return <div key={index} > {task.name} </div>;
      })}
    </div>
  );
};

export default Tasks;

끝....

React 또는 Vue로 전환하는 Angular 개발자라면 이것을 발견하게 되어 기쁠 것입니다.

그렇지 않은 경우 Rxjs, 특히 주제 및 연산자에 대해 읽어 보시기 바랍니다.

유용한 링크 🔗

https://rxjs.dev/

자오시양 / 축 관찰 가능

rxjs 방식으로 축을 사용합니다. Promise 대신 Observable 사용

축 관찰 가능

브라우저 및 node.js용 Observable(Promise와 반대) 기반 HTTP 클라이언트
rxjs(observable) 방식으로 axios를 사용하고 싶습니까? 우리는 거기에 갈!
axios-observable의 이 API는 axios의 API와 거의 동일하여 원활한 전환을 제공합니다. 따라서 문서는 axios 중 하나를 반영합니다(몇 가지 예외는 지적될 것입니다).

특징

브라우저에서 XMLHttpRequests 만들기

node.js에서 요청http을 수행합니다

.

Observable API를 지원합니다

.

가로채기 요청 및 응답

변환 요청 및 응답 데이터

(v1.1.0의 새로운 기능) 구독 취소를 통해 요청 취소

JSON 데이터에 대한 자동 변환

보호를 위한 클라이언트 측 지원XSRF

설치 중

npm 사용
참고: CRUD 및 axios는 피어 종속성입니다.

$ npm install axios rxjs axios-observable

예시

rxjs 요청 수행

import Axios from  'axios-observable';
// or const Axios = require('axios-observable').Axios;
// Make a request for a user with a given ID
Axios.get('/user?ID=12345')
  .

…


View on GitHub

.