從新梳理@angular

ANGULAR

• @angular/animations
• @angular/bazel
• @angular/benchpress
• @angular/common
• @angular/common/http
• @angular/compiler
• @angular/compiler-cli
• @angular/core
• @angular/elements

export {
  NgElement,
  NgElementConfig,
  NgElementConstructor,
  WithProperties,
  createCustomElement,
  NgElementStrategy,
  NgElementStrategyEvent,
  NgElementStrategyFactory
} from "@angular/elements";
複製代碼

• @angular/forms
• @angular/http
• @angular/language-service
• @angular/platform-browser
• @angular/platform-browser-dynamic
• @angular/platform-server
• @angular/platform-webworker
• @angular/platform-webworker-dynamic
• @angular/router
• @angular/service-worker
• @angular/upgrade
• @angular/cli

攔截器 Token

• HTTP_INTERCEPTORS

Http 事件類型

export enum HttpEventType {
  Sent,
  UploadProgress,
  ResponseHeader,
  DownloadProgress,
  Response,
  User
}
複製代碼

接口

• HttpParameterCodec

• HttpDownloadProgressEvent

• HttpInterceptor

• HttpProgressEvent

• HttpSentEvent

• HttpUserEvent

HttpEvent

export type HttpEvent<T> =
  | HttpSentEvent
  | HttpHeaderResponse
  | HttpResponse<T>
  | HttpProgressEvent
  | HttpUserEvent<T>;
複製代碼

模塊 NgModule

• HttpClientXsrfModule
• HttpClientModule
• HttpClientJsonpModule

類

• HttpClient

• NoopInterceptor

• JsonpClientBackend > HttpBackend

• JsonpInterceptor

• HttpInterceptingHandler > HttpHandler

• HttpXsrfInterceptor > HttpInterceptor

• HttpXsrfCookieExtractor > HttpXsrfTokenExtractor

• interface HttpInterceptor

• class HttpInterceptorHandler implements HttpHandler

• const HTTP_INTERCEPTORS

• class NoopInterceptor implements HttpInterceptor

• const JSONP_ERR_NO_CALLBACK

• const JSONP_ERR_WRONG_METHOD

• const JSONP_ERR_WRONG_RESPONSE_TYPE

• abstract class JsonpCallbackContext

• class JsonpClientBackend implements HttpBackend

• class JsonpInterceptor

• class HttpInterceptingHandler implements HttpHandler

• function interceptingHandler

• function jsonpCallbackContext(): Object

• interface HttpParameterCodec

• class HttpUrlEncodingCodec implements HttpParameterCodec

• interface HttpParamsOptions

• class HttpParams

• class HttpRequest

• enum HttpEventType

• interface HttpProgressEvent

• interface HttpDownloadProgressEvent

• interface HttpUploadProgressEvent

• interface HttpSentEvent

• interface HttpUserEvent

• interface HttpJsonParseError

• type HttpEvent

• abstract class HttpResponseBase

• class HttpHeaderResponse extends HttpResponseBase

• class HttpResponse extends HttpResponseBase

• class HttpErrorResponse extends HttpResponseBase implements Error

• HttpBackend
• HttpClient
• HttpHeaders
• HttpInterceptorHandler
• HttpErrorResponse
• HttpUrlEncodingCodec

HttpClient 構造函數

constructor(private handler: HttpHandler) {}
複製代碼

HttpClient 核心 request

request(
    first: string | HttpRequest<any>,
    url?: string,
    options: {
      body?: any;
      headers?: HttpHeaders | { [header: string]: string | string[] };
      observe?: HttpObserve;
      params?: HttpParams | { [param: string]: string | string[] };
      reportProgress?: boolean;
      responseType?: "arraybuffer" | "blob" | "json" | "text";
      withCredentials?: boolean;
    } = {}
  ): Observable<any> {
    // 建立http請求
    let req: HttpRequest<any>;
    if (first instanceof HttpRequest) {
      req = first as HttpRequest<any>;
    } else {
      let headers: HttpHeaders | undefined = undefined;
      if (options.headers instanceof HttpHeaders) {
        headers = options.headers;
      } else {
        headers = new HttpHeaders(options.headers);
      }
      let params: HttpParams | undefined = undefined;
      if (!!options.params) {
        if (options.params instanceof HttpParams) {
          params = options.params;
        } else {
          params = new HttpParams({
            fromObject: options.params
          } as HttpParamsOptions);
        }
      }
      req = new HttpRequest(
        first,
        url!,
        options.body !== undefined ? options.body : null,
        {
          headers,
          params,
          reportProgress: options.reportProgress,
          responseType: options.responseType || "json",
          withCredentials: options.withCredentials
        }
      );
    }
    const events$: Observable<HttpEvent<any>> = of(req).pipe(
      concatMap((req: HttpRequest<any>) => this.handler.handle(req))
    );
    if (first instanceof HttpRequest || options.observe === "events") {
      return events$;
    }
    const res$: Observable<HttpResponse<any>> = <Observable<
      HttpResponse<any>
    >>events$.pipe(
      filter((event: HttpEvent<any>) => event instanceof HttpResponse)
    );
    switch (options.observe || "body") {
      case "body":
        switch (req.responseType) {
          case "arraybuffer":
            return res$.pipe(
              map((res: HttpResponse<any>) => {
                if (res.body !== null && !(res.body instanceof ArrayBuffer)) {
                  throw new Error("Response is not an ArrayBuffer.");
                }
                return res.body;
              })
            );
          case "blob":
            return res$.pipe(
              map((res: HttpResponse<any>) => {
                if (res.body !== null && !(res.body instanceof Blob)) {
                  throw new Error("Response is not a Blob.");
                }
                return res.body;
              })
            );
          case "text":
            return res$.pipe(
              map((res: HttpResponse<any>) => {
                if (res.body !== null && typeof res.body !== "string") {
                  throw new Error("Response is not a string.");
                }
                return res.body;
              })
            );
          case "json":
          default:
            return res$.pipe(map((res: HttpResponse<any>) => res.body));
        }
      case "response":
        return res$;
      default:
        throw new Error(
          `Unreachable: unhandled observe type ${options.observe}}`
        );
    }
  }
複製代碼

HttpClient.delete

delete(
    url: string,
    options: {
      headers?: HttpHeaders | { [header: string]: string | string[] };
      observe?: HttpObserve;
      params?: HttpParams | { [param: string]: string | string[] };
      reportProgress?: boolean;
      responseType?: "arraybuffer" | "blob" | "json" | "text";
      withCredentials?: boolean;
    } = {}
  ): Observable<any> {
    return this.request<any>("DELETE", url, options as any);
  }
複製代碼

HttpClient.get

get(
    url: string,
    options: {
      headers?: HttpHeaders | { [header: string]: string | string[] };
      observe?: HttpObserve;
      params?: HttpParams | { [param: string]: string | string[] };
      reportProgress?: boolean;
      responseType?: "arraybuffer" | "blob" | "json" | "text";
      withCredentials?: boolean;
    } = {}
  ): Observable<any> {
    return this.request<any>("GET", url, options as any);
  }
複製代碼

HttpClient.head

head(
    url: string,
    options: {
      headers?: HttpHeaders | { [header: string]: string | string[] };
      observe?: HttpObserve;
      params?: HttpParams | { [param: string]: string | string[] };
      reportProgress?: boolean;
      responseType?: "arraybuffer" | "blob" | "json" | "text";
      withCredentials?: boolean;
    } = {}
  ): Observable<any> {
    return this.request<any>("HEAD", url, options as any);
  }
複製代碼

HttpClient.jsonp

jsonp<T>(url: string, callbackParam: string): Observable<T> {
    return this.request<any>("JSONP", url, {
      params: new HttpParams().append(callbackParam, "JSONP_CALLBACK"),
      observe: "body",
      responseType: "json"
    });
  }
複製代碼

HttpClient.patch

patch(
    url: string,
    body: any | null,
    options: {
      headers?: HttpHeaders | { [header: string]: string | string[] };
      observe?: HttpObserve;
      params?: HttpParams | { [param: string]: string | string[] };
      reportProgress?: boolean;
      responseType?: "arraybuffer" | "blob" | "json" | "text";
      withCredentials?: boolean;
    } = {}
  ): Observable<any> {
    return this.request<any>("PATCH", url, addBody(options, body));
  }
複製代碼

HttpClient.post

post(
    url: string,
    body: any | null,
    options: {
      headers?: HttpHeaders | { [header: string]: string | string[] };
      observe?: HttpObserve;
      params?: HttpParams | { [param: string]: string | string[] };
      reportProgress?: boolean;
      responseType?: "arraybuffer" | "blob" | "json" | "text";
      withCredentials?: boolean;
    } = {}
  ): Observable<any> {
    return this.request<any>("POST", url, addBody(options, body));
  }
複製代碼

HttpClient.put

put(
    url: string,
    body: any | null,
    options: {
      headers?: HttpHeaders | { [header: string]: string | string[] };
      observe?: HttpObserve;
      params?: HttpParams | { [param: string]: string | string[] };
      reportProgress?: boolean;
      responseType?: "arraybuffer" | "blob" | "json" | "text";
      withCredentials?: boolean;
    } = {}
  ): Observable<any> {
    return this.request<any>("PUT", url, addBody(options, body));
  }
複製代碼