Question

我已经创建了2个端点1）http://localhost:4000/show.do 2）http://localhost:4000/posts/payload 现在，我创建了一个公共服务类commonService，它具有2个get和post方法。我正在执行USER Crud操作，因此创建了UserService并调用CommonService方法。我的代码如下所示。

 export class CommonService {

  constructor(private url:string, private http: HttpClient) { }

getAll()
{
 return this.http.get(this.url)    
.pipe(map((response:any)=>response));
}

create(resource)
{
  return this.http.post(this.url,JSON.stringify(resource))
  .pipe(map((response:any)=>response.json()));
}
}

我的UserService代码如下所示

export class UserService extends CommonService {

  constructor(http:HttpClient) {
    super("http://localhost:4000/show.do", http);
   }  
}

所以我的问题是，因为我已经在此处定义了get url，所以很容易从组件进行getAll方法调用。但是，对于第二个URL，我想从这里本身进行调用，而不是创建一个新的服务类。

目前我的呼叫方式如下：

    export class UserComponent implements ngInit{
    constructor(private service:UserService){}

   ngOnInit()
      {
        this.service.getAll();
      }

    }

Answer 1

我将提供基本网址，并在每种方法中对其进行扩展：

constructor(http:HttpClient) {
    super("http://localhost:4000", http);
}  

...    
return this.http.get(`${this.url}/show.do`)
...


...
this.http.post(`${this.url}/posts/payload`,JSON.stringify(resource))
...

还有一些小费：

.pipe(map((response:any)=>response));

这是多余的，您可以将响应映射到响应。

JSON.stringify(resource)

您不必使用JSON.stringify angular可以自行处理

.pipe(map((response:any)=>response.json()));

如果您希望使用泛型来添加类型信息，也不需要这样做

this.http.get<MyCalss>(...)

Answer 2

尝试使用消耗HttpRequest对象的this.http.request方法

call(methodtype,url,object){
    const req = new HttpRequest(methodtype, url, object, {
      reportProgress: true
    });

    return this.http.request(req).pipe(
      map(event => {//do your stuff}),
      tap(message => {//here also }),
      last(), // return last (completed) message to caller
      catchError(this.handleError(file))
    );
}

Answer 3

一种解决方案是使CommonService接受一个根URL，而不是整个URL，并为每种方法定义一个特定的后缀。参见以下示例：

export class CommonCrudService {

  constructor(private rootUrl: string, private http: HttpClient) {
  }

  getAll() {
    return this.http.get(this.rootUrl + '/get')
      .pipe(map((response: any) => response));
  }

  create(resource) {
    return this.http.post(this.rootUrl + '/post', JSON.stringify(resource))
      .pipe(map((response: any) => response.json()));
  }
}

您的用户服务：

export class UserService extends CommonService {

  constructor(http:HttpClient) {
    super("http://localhost:4000/user", http);
   }  
}

我建议您看看如何在RESTful API中定义url，它可以帮助您编写标准/优雅的解决方案。

进行Web服务调用时，如何从Angular传递不同的参数？

3 个答案: