angular5 httpclient的示例实战

前端之家收集整理的这篇文章主要介绍了angular5 httpclient的示例实战前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

从angular 4.3.0 以后的版本开始使用httpclient,替换了之前的http,引用的包路径已经变为了angular/common/http了

一个基础的 httpclient 样例

@Injectable()
export class Service {

private static METHOD_DELTE = 'DELETE';
private static METHOD_POST = 'POST';
private static METHOD_GET = 'GET';
private static METHOD_PUT = 'PUT';

constructor(private httpClient: HttpClient) {
}

/**

  • 将数据上传
  • @param data
  • @param {Function} func
    */
    uploadDataPost(data: any,func: Function) {
    let url = '/api/test';
    this.apiPost(url,data)
    .subscribe((response: HttpResponse) => {
    func(response);
    },error => {
    func(undefined);
    });
    }

/**

  • 返回json 格式的obj 对象
  • @param url
  • @param body
  • @param urlSearchParams
  • @returns {Observable<{}>}
    */
    apiPost(url,body,urlSearchParams?: any): Observable<{}> {
    let options = {
    body: body ? body : null,params: urlSearchParams,responseType: 'json'
    };
    return this.httpClient.request(Service.METHOD_POST,url,options);
    }

/**

  • 返回一个obj 对象
  • @param url
  • @param urlSearchParams url 的查询参数
  • @returns {Observable<{}>}
    */
    apiGet(url,urlSearchParams?: any): Observable<{}> {
    let options = {
    params: urlSearchParams,responseType: 'json'
    };
    return this.httpClient.request(Service.METHOD_GET,options);
    }
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章