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

前端修罗场

发布于 2022-07-29 00:11:42

2K00

代码可运行

文章被收录于专栏：Web 技术Web 技术

运行总次数：0

代码可运行

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

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

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

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

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

开始

安装

$ npm install axios rxjs axios-observable

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

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

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，而且这比在每个组件中创建一个类的对象要好。

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

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;

在 React 组件中使用

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;