基于angular2 的 http服务封装

作者: 小处成就大事 | 来源:发表于2017-06-25 10:31 被阅读157次
    狗尾草丛的姑娘2【摘自QQ空间】

    最近在项目中折腾了下angular2,所以出来跟大家分享,希望有帮助,每个公司业务不一样,按实际情况而定

    (1).导入依赖

    /**

    * name:http服务

    * describe:对http请求做统一处理

    * author:1490040004@qq.com

    * date:2017/5/15

    * time:09:29

    */

    import {Injectable}                                                from '@angular/core';

    import {Http, Response, Headers, RequestOptions, Request}          from '@angular/http';

    import 'rxjs/add/operator/toPromise';

    @Injectable()

    export class HttpInterceptorService {

    constructor(private http: Http) {

    }

    (2).发送请求统一处理

    //发送请求统一处理

    public request(params: any): any {

    let options = new RequestOptions({

    method: (params['method'] == 'post' || params['method'] == 'POST') ? 'POST' : 'GET',

    url: params['url'],

    headers: new Headers({'content-type': 'application/json', 'Accept': 'application/hal+json;charset=UTF-8'}),

    params: !(params['method'] == 'post' || params['method'] == 'POST') ? params["data"] : {},

    body: (params['method'] == 'post' || params['method'] == 'POST') ? JSON.stringify(params["data"]) : {}

    });

    return this.http.request(new Request(options))

    .toPromise()

    .then(this.handleSuccess)

    .catch(res=>this.handleError(res));

    }

    (3).处理请求成功

    private handleSuccess(res: Response) {

    let body = res["_body"];

    if (body) {

       return {

       data: res.json().content || {},

       page: res.json().page || {},

       statusText: res.statusText,

       status: res.status,

       success: true

      }

    }

    else {

       return {

       statusText: res.statusText,

       status: res.status,

       success: true

       }

     }

    }

    (4).处理错误

    private handleError(error) {

    console.log(error);

    let msg = '请求失败';

    if (error.status == 400) {

       console.log('请求参数正确');

     }

    if (error.status == 404) {

       console.error('请检查路径是否正确');

     }

    if (error.status == 500) {

       console.error('请求的服务器错误);

     }

    console.log(error);

    return {success: false, msg: msg};

      }

    }

    <完>

    福利:如果你是喜欢看书的朋友,不妨点击【有惊喜】这是我在亚马逊买的电子书。都非常珍贵,希望你能喜欢

    作者:小处成就大事

    简介:一个喜欢分享和学习的前端开发程序猿,平时喜欢看看书,游泳,爬山,户外骑行等,期待与志同道合的你成为朋友,一起交流、一起进步。

    初衷:对我来说,写文章是学习和记录一些没有精通和完全掌握的知识点,其次才是分享知识。通过自己查找资料和经验心得整理出来,做到通俗易懂分享给需要的人,分享知识不是为了炫耀,也不是为了谋利,而是为了更多需要汲取知识的人,可以收获知识,同时自己也可以从中收获知识,坚持做知识分享真的很难,但是我会坚持下去····

    博客小处成就大事_新浪博客

    如果有志同道合的朋友不妨加微信一起交流和学习,期待你的到来

    相关文章

      网友评论

        本文标题:基于angular2 的 http服务封装

        本文链接:https://www.haomeiwen.com/subject/xuilcxtx.html