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模块。使用基本服务的示例fetchclass 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 安装它。