【Angular 进阶之】Git 地址：
- /ngx-:(REST)for2
官方介绍：
Core 是 ngx- lib的演变，它为开发人员提供了灵活性 。每个开发人员都可 以实现自己的请求处理程序以轻松自定义行为 。事实上，@ngx-/core 是一个抽象的公共库，它使用发出请求，因此甚至可以将 node.js 服务器端的 lib 与一起使用 。你只需要为它实现一个。
安装：
npm i --save @ngx-resource/core @ngx-resource/handler-ngx-http
使用：
一、创建 class
说明：
例子中涉及到的API介绍
1：在中可以指定请求路径前缀
@ResourceParams({pathPrefix: '/api'})
2: 在中指定路径，请求方式，返回类型等
// 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 recommendedreturnAs: ResourceActionReturnType.Promise})getWeatherByParams: IResourceMethodPromiseStrict;constructor(restHandler: ResourceHandler ) {super(restHandler);}}
二、app
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