Javascript 如何在Angular8中创建通用请求服务

我创建了一个通用请求服务，但它一直返回“ZoneAwarePromise”。我尝试使用.pipe（）和.subscribe（）来尝试检索请求的内容，但它不起作用

requester.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class RequesterService {

  constructor(private http: HttpClient) { }

  request(method, url, headers, body, params) {
    return this.http.request(method, url, {
      body: body || {},
      headers: headers || {},
      params: params || {}
    })
  }

  async get(url, params?, headers?, data?) {
    return await this.request('get', url, params, headers, data)
  }

  async post(url, params, headers, data) {
    return await this.request('post', url, params, headers, data);
  }

  async put(url, params, headers, data) {
    return await this.request('put', url, params, headers, data);
  }

  async delete(url, params, headers, data) {
    return await this.request('delete', url, params, headers, data);
  }
}

gym-list.component.ts

import { Component, OnInit } from '@angular/core';
import { RequesterService } from 'src/app/core/Requester/requester.service';

@Component({
  selector: 'app-gym-list',
  templateUrl: './gym-list.component.html',
  styleUrls: ['./gym-list.component.css']
})
export class GymListComponent implements OnInit {

  constructor(private Requester: RequesterService) { }

  ngOnInit() {
    console.log(this.teste())
  }

  async teste() {
    await this.Requester.get('https://searchs.glitch.me/proposalcontent')
  }
}

---

您正在尝试使用wait返回一个非异步函数

  request(method, url, headers, body, params) {
    return this.http.request(method, url, {
      body: body || {},
      headers: headers || {},
      params: params || {}
    })
  }

  async get(url, params?, headers?, data?) {
    return await this.request('get', url, params, headers, data)
  }

这里不应该使用异步等待系统

试试这个：

  get(url, params?, headers?, data?) {
    return this.request('get', url, params, headers, data)
  }

并在component.ts文件中订阅此方法

像这样：

Requester.get.subscribe(....)

---

实际上，您可以创建一个可以在任何服务中扩展的抽象基本服务类。这将通过调用另一个具有通用错误处理代码的服务来自动处理错误。如果您传递了

customError

标志，则错误将返回到组件中以处理自定义错误。此方法使用的是

RxJs

可观测值

，可在component.ts中订阅，并捕获响应和错误

import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";
import { tap } from "rxjs/operators";

import { HttpOptionsService } from "../../services/httpoptions.service";

export abstract class ServiceBase {
  constructor(
    private http: HttpClient,
    private httpOptionService: HttpOptionsService
  ) {}

  httpOptions = {
    headers: new HttpHeaders({
      "Content-Type": "application/json"
    })
  };

  getFormattedPostRequest(
    url: string,
    body: any,
    customError: boolean = false): Observable<any> {
    return this.pipeTapObservable(
      this.http.post(url, body, this.httpOptions),
      customError
    );
  }

  getFormattedPutRequest(
    url: string,
    body: any,
    customError: boolean = false
  ): Observable<any> {
    return this.pipeTapObservable(
      this.http.put(url, body, this.httpOptions),
      customError
    );
  }

  getFormattedGetRequest(
    url: string,
    customError: boolean = false
  ): Observable<any> {
    return this.pipeTapObservable(
      this.http.get(url, this.httpOptions),
      customError
    );
  }

  getFormattedDeleteRequest(
    url: string,
    customError: boolean = false
  ): Observable<any> {
    return this.pipeTapObservable(
      this.http.delete(url, this.httpOptions),
      customError
    );
  }

  private pipeTapObservable(
    request: Observable<any>,
    customError: boolean = false
  ): Observable<any> {
    return request.pipe(
      tap(
        response => response,
        error => {
          !customError &&
            this.httpOptionService.handleError(error);
          return error;
        }
      )
    );
  }
}

---

您可以使用async/await，但是这种语法用于promise类型，而request方法返回一个可观察的对象，因此您只需要从request方法返回一个promise，或者您可以在get、post、put、delete方法的return语句中执行

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
@注射的({
providedIn:'根'
})
导出类请求服务{
构造函数（私有http:HttpClient）{}
请求（方法、url、标题、正文、参数）{
返回此.http.request（方法、url、{
body:body |{}，
标题：标题| |{}，
params:params | |{}
}).toPromise（）；
}
获取（url、参数、标题、数据）{
返回此.request（'get'，url，params，headers，data）；
}
post（url、参数、标题、数据）{
返回此.request（'post'，url，params，headers，data）；
}
put（url、参数、标题、数据）{
返回此.request（'put'，url，params，headers，data）；
}
删除（url、参数、标题、数据）{
返回此.request（'delete'，url，params，headers，data）；
}
}

组成部分

从'@angular/core'导入{Component，OnInit}；
从'src/app/core/Requester/Requester.service'导入{RequesterService}；
@组成部分({
选择器：“应用程序健身房列表”，
templateUrl:'./gym list.component.html'，
样式URL:['./gym list.component.css']
})
导出类GymListComponent实现OnInit{
构造函数（私有请求者：请求者服务）{}
恩戈尼尼特（）{
console.log（this.teste（））
}
异步测试（）{
const result=wait this.Requester.get（'https://searchs.glitch.me/proposalcontent');
console.log（result）；
从“@angular/common/http”导入{HttpClient，HttpHeaders，HttpRequest，HttpEventType，HttpEvent，HttpResponse，HttpErrorResponse}；
从'rxjs'导入{observatable，from}；
从“/igeneric http客户端”导入{IGenericHttpClient}；
从“@angular/core”导入{Injectable}；
从“../view models/component type.enum”导入{HttpMethod}
从“../view models/interface”导入{IRequestOptions}；
从“../view models/environment view model”导入{environment ViewModel}；
从“rxjs/operators”导入{retry}；
@可注射（）
导出类GenericHttpClient实现IGenericHttpClient{
构造函数（私有httpClient:httpClient，私有环境：EnvironmentViewModel）{}
public Post（destinationUrl:string，options？：iRequestStoptions）：可观察{
返回此.request（HttpMethod.Post、destinationUrl、options）；
}
公共看跌期权（destinationUrl:string，options？：IRequestOptions）：可观察{
返回此.request（HttpMethod.Put、destinationUrl、options）；
}
public Get（destinationUrl:string，options？：IRequestOptions）：可观察{
返回此.request（HttpMethod.Get、destinationUrl、options）；
}
公共删除（destinationUrl:string，options？：iRequestStoptions）：可观察{
返回此.request（HttpMethod.Delete、destinationUrl、options）；
}
私有请求（方法：string，url:string，选项？：IRequestOptions）：可观察{
返回可观察的。创建（（观察者：任意）=>{
this.httpClient.request（新的HttpRequest（方法，this.environment.baseUrl+url，选项））.subscribe(
（答复：任何）=>{
const responsTye=响应为HttpEvent
开关（响应类型）{
案例HttpEventType。已发送：
log（'Request sent！'）；
打破
案例HttpEventType.ResponseHeader：
log（'Response header received！'）；
打破
案例HttpEventType.DownloadProgress：
常量kbLoaded=Math.round（responsTye.loaded/1024）；
log（`Download in progress！${kbLoaded}kbLoaded`）；
打破
案例HttpEventType。响应：
观察者。下一步（响应。正文）；
console.log（'您是否在
RequesterService
中尝试了不使用
async
和
wait
的逻辑？我从来没有使用过带有可观察对象的逻辑，因此这将是我的第一个想法，即尝试使用管道和订阅的原因。
Requester.get（url，…）如何
比http.get（url，…）
更简单吗？使用async/Wait没有错，您必须将observable转换为promise，observable对此有一个方法，如果有效，请检查m答案
 @Injectable()
    export class MyService extends ServiceBase {
      constructor(
        http: HttpClient,
        httpOptionService: HttpOptionsService
    ) {
        super(http, httpOptionService);
      }
   }