如何在React或Vue中使用Angular 的 Rxjs API服务

在 Angular 中，服务是在彼此不认识的类之间共享信息的好方法。通过使用服务，你将能够:

• 从应用程序中的任何组件获取数据
• 使用Rxjs操作符和其他操作符…..
• 将其用作状态管理(使用 subjects)
• 并且有一个干净漂亮的代码

RxJS可以用于任何框架或纯javascript。这意味着下面的代码可以工作在Vue.js或 React中。

RxJS是一个库，通过使用可观察序列来组合异步和基于事件的程序。

RxJS提供了大量的数学、转换、过滤、实用、条件、错误处理、连接类别的操作符，在响应式编程中使用这些操作符时，生活会变得很简单。

开始

1. 安装

代码语言：javascript复制

$ npm install axios rxjs axios-observable

创建一个包含所有API服务的文件夹，通常我将其命名为services 我还在src/ services中创建了它，随便在哪里创建都行。

1. 创建新的.ts或.js文件，我将其命名为task.ts(因为我在这里使用typescript)

代码语言：javascript复制

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;

所以在这里我们创建了单例类，这样我们以后就可以使用subject，而且这比在每个组件中创建一个类的对象要好。

1. 编写api调用时，我将编写一个简单的CRUD

代码语言：javascript复制

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;

1. 在 React 组件中使用

代码语言：javascript复制

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;

如果你是Angular开发人员，正在切换到React或Vue，我相信你会很高兴看到这个。

如果你不是，那么我建议你阅读Rxjs，特别是Subjects和操作符(Operators)。

react rxjs typescript angularjs

0 人点赞