angular8如何封装http服务


当前第2页 返回上一页

return this.http.post(url, httpParams, options).pipe(catchError(this.handleError));

这里返回的是Observable<{}> ,并通过pipe管道处理请求异常,异常的处理在最下面的handleError 方法里。

使用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// 引入封装好的http服务

constructor(private http: HttpService) { }

 

/**

   * 测试get方法

   * @param successCallback 成功的回调

   * @param failCallback 失败的回调

   */

public testGet(url: string, successCallback?: Function, failCallback?: Function) {

  const httpOptions = {

    headers: new HttpHeaders({

      'Content-Type': 'application/json; charset=UTF-8'

    })

  };

 

  this.http.get(url, httpOptions.headers).subscribe(

    (res: any) => {

      successCallback(res); // 成功走sucessCallback

    }, (err: HttpErrorResponse) => {

      failCallback(err);         // 失败

    }

  );

}

这是一个具体的get请求service,testGet定义里三个参数,一个是请求地址,还有成功的回调与失败的回掉。
subscribe订阅observable 对象。

在component里使用

this.testService.testGet('url', (res:any) => {}, (err:any) =>{});

总结

angular封装http请求并不难,官网也讲得比较清楚。

个人认为最重要的还是这种封装服务的思想,而angular为什么要区别组件服务?

一个重要的原因就是它希望,数据展示逻辑数据访问逻辑 是拆分开的,组件需要在页面展示的数据就委托为某个服务去取!以此使代码得到高复用。

更多编程相关知识,请访问:编程视频!!

以上就是angular8如何封装http服务的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

谈谈Angular模块的使用以及懒加载

浅谈Angular中组件样式的工作原理

16个值得收藏的Angular ui框架分享

浅谈Angular中如何添加和使用font awesome

浅谈Angular模板指令:ng-template和ng-container的用法

了解Angular中的变化检测(change detection)机制

详解Angular中的组件交互

Angular cli中的在线和离线安装

浅谈Angular中的component/service

一次性搞懂 http、https、spdy、http2

更多相关阅读请进入《Angular》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...