Git 地址:
GitHub - troyanskiy/ngx-resource: Resource (REST) Client for Angular 2
官方介绍:
Resource Core 是 ngx-resource lib的演变,它为开发人员提供了灵活性。 每个开发人员都可 以实现自己的请求处理程序以轻松自定义行为。 事实上,@ngx-resource/core 是一个抽象的公共库,它使用 ResourceHandler 发出请求,因此甚至可以将 node.js 服务器端的 lib 与 typescript 一起使用。 你只需要为它实现一个 ResourceHandler 。
安装:
npm i --save @ngx-resource/core @ngx-resource/handler-ngx-http
使用:
一、创建Resource class
说明:
例子中涉及到的API介绍
1:在IResourceParams中可以指定请求路径前缀
@ResourceParams({ pathPrefix: '/api' })
2: 在IResourceAction中指定路径,请求方式,返回类型等
// will make an post request to /api/login @ResourceAction({ method: ResourceRequestMethod.Post, path: '/login', returnAs: ResourceActionReturnType.Promise }) login: IResourceMethodPromise<{login: string, password: string}, IReturnData>;
3:请求方式有七种,根及实际情况选择,默认值是Get
export declare enum ResourceRequestMethod { Get = 1, Post = 2, Put = 3, Delete = 4, Options = 5, Head = 6, Patch = 7
4: 返回类型有三种
export declare enum ResourceActionReturnType { Promise = "promise", Observable = "observable", Resource = "resource"
例子以从天气网获取北京天气为例
import { Injectable } from '@angular/core'; import { Resource, ResourceParams, ResourceAction, ResourceRequestMethod, IResourceMethodPromise, ResourceActionReturnType, IResourceMethodObservable, ResourceHandler, IResourceMethodPromiseStrict } from '@ngx-resource/core'; import { IWeather } from './weather'; @Injectable() @ResourceParams({ url: 'http://wthrcdn.etouch.cn/weather_mini?citykey=101010100' // url: 'http://wthrcdn.etouch.cn/weather_mini' Use when there are parameters }) export class DataResource extends Resource { @ResourceAction({ method: ResourceRequestMethod.Get, returnAs: ResourceActionReturnType.Promise }) getWeather: IResourceMethodPromise<{}, IWeather>; @ResourceAction({ method: ResourceRequestMethod.Get, returnAs: ResourceActionReturnType.Observable }) getWeatherObservable: IResourceMethodObservable<{}, IWeather>; @ResourceAction({ method: ResourceRequestMethod.Get, // params: { citykey: 101010100 }, Works but not recommended returnAs: ResourceActionReturnType.Promise }) getWeatherByParams: IResourceMethodPromiseStrict<null, null, {citykey: number}, IWeather>; constructor(restHandler: ResourceHandler ) { super(restHandler); } }
二、app Module
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { ResourceModule, ResourceHandlerHttpClient } from '@ngx-resource/handler-ngx-http'; import { AppComponent } from './app.component'; import { DataResource } from './weather/dataResource.service'; import { MyAuthResource } from './login/authResource.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, ResourceModule.forRoot() ], providers: [ ResourceHandlerHttpClient, DataResource, MyAuthResource ], bootstrap: [AppComponent] }) export class AppModule { }
三、使用
下面列举了不同种返回结果的处理方式
import { Component, OnInit } from '@angular/core'; import { DataResource } from './weather/dataResource.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'blogDemo'; weather = { data: { city: '' } }; constructor(private dataResource: DataResource) { } async ngOnInit(): Promise<void> { // use #1 this.dataResource.getWeather().then(weather => { this.weather = weather; }); // use #2 this.weather = await this.dataResource.getWeather(); // use #3 this.weather = await this.dataResource.getWeatherObservable().toPromise(); // use #4 this.dataResource.getWeatherObservable() .subscribe( (res: any) => { this.weather = res; }, (err: any) => { console.error(err); } ); // use #5 this.weather = await this.dataResource.getWeatherByParams(null, null, { citykey: 101010100 }); console.log('this.weather', this.weather); } }
四、运行结果
五、post请求
1. 创建Resource class具体路径以实际情况为准
import { Injectable } from '@angular/core'; import { Resource, ResourceParams, ResourceAction, ResourceRequestMethod, ResourceHandler, IResourceMethodPromise } from '@ngx-resource/core'; import { IReturnData } from './auth'; @Injectable() @ResourceParams({ pathPrefix: '/api' }) export class MyAuthResource extends Resource { // will make an post request to /api/login @ResourceAction({ method: ResourceRequestMethod.Post, path: '/login' }) login: IResourceMethodPromise<{login: string, password: string}, IReturnData>; constructor(restHandler: ResourceHandler ) { super(restHandler); } }
2. models
export interface IReturnData { code?: number; message?: number; }
3. 使用
// use #6 await this.authResource.login({login: 'test', password: 'test'});
Demo
1: 执行npm i
2: 执行 ng serve --open