使用 Angular 的 HTTPClient 在 API 请求的可重用 function 中确定适当的 HTTP 方法

Question

I want to implement a reusable service for making requests to my API.

Right now, I have it working as intended, but for GET requests only.

Here's the function:

  makeAPIRequest = ({ ...opts }) => {
    return this.http.get(opts.url, opts.params)
      .toPromise()
      .then(response => response)
      .catch(err => this.handleError(err));
  };

And here's an example of how it's being used:

  getCustomer(id): Promise<Customer> {
    return this.APIService.makeAPIRequest({
      url: this.customerEditUrl(id)
    }) as Promise<Customer>;
  }

I want to extend the functionality such that I'm able to pass an HTTP method into opts , but I'm not sure how to do that cleanly. I'd like to avoid using a large conditional and repeating myself -- it'd be nice to be able to approach this concisely. For example, if I pass in opts that look like this:

 { url: this.customerEditUrl(id), params, httpMethod: 'POST' }

How can I make my makeAPIRequest function look like this?

  makeAPIRequest = ({ ...opts }) => {
    return this.http.post(opts.url, opts.params)
      .toPromise()
      .then(response => response)
      .catch(err => this.handleError(err));
  };

Thanks in advance!

Answer 1

Instead of using this.http.post() you could manually create a new request. The request constructor allows specifying the method as a string.

Have a look at: https://angular.io/api/common/http/HttpClient#request

One of the constructor overloads for this.http.request(...) looks as follows:

request(method: string, url: string, options: { body?: any; headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "blob"; withCredentials?: boolean; }): Observable<Blob>

As you can see the first parameter is the HTTP Method as string. The rest should be relatively familiar to you.

this.http.request(opts.httpMethod, opts.url, opts.params)

should do the trick;)

---

I also suggest you have a look at using observable directly instead of converting the returned observable to a promise.