Best practice for call REST services and global error catching with angular2 [closed]

后端未结

关注

 2  977

挽巷

相关标签:

2条回答

悲&欢浪女

2021-01-03 03:42

The best solution is to wrap the Http service with your own service. For example you create a service called YourHttp. YourHttp should implement the same interface as Http.

Inject Http into YourHttp and have each method, get, post, put.. etc call the http method and then catch and handle any errors.

Now in your components inject YourHttp. For extra credit, configure DI to inject YourHttp when your components are annotated to have Http injected.

Update

Now that there is HttpClient, it is best to use an interceptor.

0 讨论(0)
发布评论:

提交评论
- 加载中...

长情又很酷

2021-01-03 03:55

The best practice i have found so far is to firstly create global service and create your method related to http there. i.e for Get, Put,Post ,Delete request etc. than via using these methods call your API service request and catch there errors using catch block and display message as you want for example :-

Global_Service.ts

import {Injectable} from '@angular/core';
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/Rx';

@Injecable()
export class GlobalService {
    public headers: Headers;
    public requestoptions: RequestOptions;
    public res: Response;

    constructor(public http: Http) { }

    public PostRequest(url: string, data: any): any {

        this.headers = new Headers();
        this.headers.append("Content-type", "application/json");
        this.headers.append("Authorization", 'Bearer ' + key );

        this.requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: url,
            headers: this.headers,
            body: JSON.stringify(data)
        })

        return this.http.request(new Request(this.requestoptions))
            .map((res: Response) => {
                    return [{ status: res.status, json: res }]
            })
            .catch((error: any) => {     //catch Errors here using catch block
                if (error.status === 500) {
                    // Display your message error here
                }
                else if (error.status === 400) {
                    // Display your message error here
                }
            });
    }

    public GetRequest(url: string, data: any): any { ... }

    public PutRequest(url: string, data: any): any { ... }

    public DeleteRequest(url: string, data: any): any { ... }
 }

better to provide this service as dependency at the time of bootstraping your app like this :-

bootstrap (APP, [GlobalService, .....])

than whereever you want to call the request call the request using these globalservice methods like this :-

demo.ts

export class Demo {
     ...
    constructor(public GlobalService: GlobalService) { }

    getMethodFunction(){
       this.GlobalService.PostRequest(url, data)
        .subscribe(res => {console.log(res),
                   err => {console.log(err)}
             });
    }