@angular-resource/http

@angular-resource/http

HTTP-adapter of angular-resource

Allows http requests. Wraps HttpClientModule

Example

// current-user.resource.ts
import { ReactiveResource } from '@angular-resource/core';
import { HttpConfig, HttpMethod, Get, Post, Put, Patch, Delete, Options, Head, Jsonp} from '@angular-resource/http';

export interface GetUserReq {
  id: number
}
export interface User {
  id: number;
  name: string;
}

@HttpConfig({
  host: 'http://test.com/api',
  url: '/users/:id',
  headers: { 
    Authorization: 'some-token' 
  },
  withCredentials: true,
  transformResponse (response, options) {
    if (options.isArray) {
      return response.data
    }
    return response;
  }
})
export class CurrentUserResource extends ReactiveResource {
  query   = Get({isArray: true});
  get     = Get();
  create  = Post();
  update  = Patch();
  replace = Put();
  delete  = Delete();

  getSpecialUser: HttpMethod<GetUserReq, User[]> = Get({ url: '/users/special:', cancelDuplicates: true });
}

// app.component.ts
import { CurrentUserResource } from './_resources/current-user.resource';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  providers: [CurrentUserResource]
})
export class AppComponent implements OnInit {

  constructor(
    private currentUser: CurrentUserResource,
  ) {}
    
  public ngOnInit() {
    // Common way (Promise)
    this.currentUser.get()
      .then(user => {
        console.log(user)
      })
      .catch(error => {
        console.error(error)
      })
      
    // Event-driven way (Observable)
    this.currentUser.actions.next({type: 'customEvent', payload: 123});
    this.currentUser.actions.next({type: 'customError', error: 'Err123'});

    this.currentUser.actions.subscribe(action => {
      console.log(action); // {type: 'customEvent', payload: 123} and {type: 'customError', error: 'Err123'}
    });

    this.currentUser.errors.subscribe(error => {
      console.log(error); // Err123
    });

    // Or with sugar
    this.currentUser.action('event1').next(123);
    this.currentUser.error('event2', 'event3').next('Err123');

    this.currentUser.action('event1', 'event2', 'event3').subscribe(payload => {
      console.log(payload); // 123
    });

    this.currentUser.error('event1', 'event2').subscribe(error => {
      console.log(error); // Err123
    });
  }
}

HttpConfig

• url string - Resource URL or path. If not absolute (http/https) then shoul be added to host

• host string - Resource host. Constant part of url

• body any - Request body (for POST, PUT, PATCH etc. methods)

• headers { [key: string]: string | string[] } - HTTP headers

• params any - QUERY | Template | etc. params

• observable boolean - Response is Observable or Promise

• noTrailingSlash boolean - Remove trailing slash

• withCredentials boolean - Use credentials

• isArray boolean - Result is in array

• reportProgress boolean - ?

• responseType arraybuffer | blob | json | text - Response type

• transformRequest (request: Request, httpConfig: IHttpConfig) => any

• transformResponse (response: any, httpConfig: IHttpConfig) => any

• transformErrorResponse (errorResponse: HttpErrorResponse, httpConfig: IHttpConfig) => HttpErrorResponse | never | any - (Return undefined or NEVER to prevent this event)

• mock (req: Request, httpConfig: IHttpConfig) => any - Server mock

• cache boolean - Cache similar request

• cancelDuplicates boolean - Cancel previous duplicate requests

See also: angular-resource documentation