angular请求示例

方法定义

import {
	HttpClient,
	HttpEventType,
	HttpHeaders,
	HttpParams,
	HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

constructor(
	private http: HttpClient
) {}
// 1.GET
/*
	HttpClient.get<any>(url: string, options: {
	    headers?: HttpHeaders | {
	        [header: string]: string | string[];
	    };
	    observe: "response";
	    params?: HttpParams | {
	        [param: string]: string | string[];
	    };
	    reportProgress?: boolean;
	    responseType?: "json";
	    withCredentials?: boolean;
	}): Observable<...>
*/
query(url: string, requestParams: any): Observable<HttpResponse<any>> {
	return this.http.get<any>(`${url}`, {
		observe: 'response',
		params: requestParams
	});
}

// 2.POST
/*
	HttpClient.post<any>(url: string, body: any, options: {
	    headers?: HttpHeaders | {
	        [header: string]: string | string[];
	    };
	    observe: "response";
	    params?: HttpParams | {
	        [param: string]: string | string[];
	    };
	    reportProgress?: boolean;
	    responseType?: "json";
	    withCredentials?: boolean;
	}): Observable<...>
*/
create(url: string, requestBody: any: requestParams: any): Observable<HttpResponse<any>> {
	return this.http.post<any>(`${url}`, requestBody, {
		observe: 'response',
		params: requestParams
	});
}

// 3.PUT
/*
	HttpClient.put<any>(url: string, body: any, options: {
	    headers?: HttpHeaders | {
	        [header: string]: string | string[];
	    };
	    observe: "response";
	    params?: HttpParams | {
	        [param: string]: string | string[];
	    };
	    reportProgress?: boolean;
	    responseType?: "json";
	    withCredentials?: boolean;
	}): Observable<...>
*/
update(url: string, requestBody: any: requestParams: any): Observable<HttpResponse<any>> {
	return this.http.put<any>(`${url}`, requestBody, {
		observe: 'response',
		params: requestParams
	});
}

// 4.DELETE
/*
	HttpClient.delete(url: string, options: {
	    headers?: HttpHeaders | {
	        [header: string]: string | string[];
	    };
	    observe: "response";
	    params?: HttpParams | {
	        [param: string]: string | string[];
	    };
	    reportProgress?: boolean;
	    responseType?: "json";
	    withCredentials?: boolean;
	}): Observable<...>
*/
del(url: string, requestParams: any) {
	return this.http.get<any>(`${url}`, {
		observe: 'response',
		params: requestParams
	});
}

请求示例

// post、put、delete方法类似
this.query(url, params).subscribe(res => {
	console.log(res);
});

使用HttpClient.request()方法发送上传文件请求

多用于上传文件

const formData = new FormData();
// file为需要上传的文件，上传组件中可以拿到
formData.append('files[]', file);
/*
	new HttpRequest<FormData>(method: "POST" | "PUT" | "PATCH", url: string, body: FormData, init?: {
	    headers?: HttpHeaders;
	    reportProgress?: boolean;
	    params?: HttpParams;
	    responseType?: "arraybuffer" | ... 2 more ... | "text";
	    withCredentials?: boolean;
	}): HttpRequest<...>
*/
const req = new HttpRequest(
	'POST',
	url,
	formData,
	{
       	headers: new HttpHeaders({'Authorization': 'Bearer xxx' }),
    	reportProgress: true,
   		params: new HttpParams()
	     .append('param1', p1)
	     .append('param2', p2)
	}
);
this.http.request(req).subscribe(event => {
	// reportProgress: true的响应
    if (event.type === HttpEventType.UploadProgress) {
        const percent = event.loaded / event.total * 100;
        const uploadPercent = percent.toFixed(0);
    }
    if (event.type === HttpEventType.Response) {
    	// 请求完成后的响应
    }
},
err => {
	console.log(err);
});