react 和 angular 之间的共享服务

Question

在我的公司，我们有 3 个应用程序，1 个 ng8、1 个 vue 和一个新的 react。我正在寻找一种编写共享核心库的方法，以将我们的公共服务（登录、身份验证、存储等）放在那里，这些服务是常见的并且与 DOM 无关（主要是对我们 API 的 HTTP 调用）。它目前是用 Angular 编写的，并且喜欢内置的 DI，因为它们相互使用。这个想法是用 vanilla javascript 编写它以允许所有框架使用它。更新：当前简化的角度实现：//file: auth.service.ts:export class AuthService {    setCred(uname: string, token: string) {    }    getCred() {    }}//file: login.service.ts:import { AuthService } from './auth.service';export class LoginService {    constructor(private http: HttpClient, private authService: AuthService) {    }    login(email: string, pass: string): Observable {        return this.http.post('/login', {email, pass}).subscribe(response => {            this.authService.setCred(response.uname, response.token);        }    }}}我希望能够像这样在 Angular 应用程序中使用这两种服务：@Injectable({  providedIn: 'root'})export class FeatureService {  constructor(    private httpClient: HttpClient,    private authService: AuthService,    private userService: UserService  ) {    console.log('feature service init', authService.getCred());  }}这种要求有已知的方法吗？我仍然想在图书馆里促进 DI。我将如何以角度使用此类服务？我需要将它们包装在 Angular 服务中吗？

Answer 1

我会将你所有的 API 调用移动到可以导入到你的 React、Vue 和 Angular 应用程序中的模块中。您可以使用NPM 上fetch的许多其他模块之一。HttpClient

从 Angular 的角度来看，这样做是有弊端的。Angular 希望您使用该HttpClient模块，因此如果您放弃该模块并使用共享模块，您将失去很多这些功能。因此，如果您需要HttpInterceptor设置，则必须创建自己的而不是使用 Angulars，因为您没有使用它们的HttpClient. 我对 React 或 Vue 的使用还不够多，不知道它们是否也有自己的HttpClient模块。

使用基本服务的示例fetch

class TodoService {

  constructor() {}

  static getTodo(id) {

    return new Promise( (resolve, reject) => {

      fetch(`https://jsonplaceholder.typicode.com/todos/${id}`).then(r => resolve( r.json() ) );

    });

  }

  // ...

}

TodoService.getTodo(1).then(t => console.log(t) );

一旦你弄清楚你想要在你的模块中做什么，那么你就可以在任何你需要的地方export提供服务。import请记住，如果您将依赖项引入模块，则必须打包模块，以便您的依赖项随模块一起提供。

Answer 2

在这种情况下，您的服务应该与框架/库无关。正如您所描述的那样，它就像是另一个被分成域的层。可能会创建一个存储库来存储此项目和。这些应用程序可以使用 NPM 安装它。