@interaction/http-function

快速上手（HttpFunction）

安装

npm i @interaction/http-function

全局配置

在app.module.ts文件中导入HttpFunctionModule，其中forRoot()方法可以传一个对象config做为参数(如果不传，则执行默认配置)，对象必须是四个字段code,codeValue,message,data。

属性名	含义	默认值
code:string	接口返回数据的code 字段	‘code’
codeValue:string	接口返回数据code字段的正确码值	‘1000000’
message:string	接口返回数据的信息字段	'message'
data:string	接口返回数据的数据字段	'data'

配置样例

此对象（config）可全局配置接口的数据格式。

1、如果接口的返回格式为

{
	code: '1000000',
	message: 'success',
	data: [
		'id','event','time'
	]
}

全局配置为默认值即可

import { HttpFunctionModule } from '@interaction/http-function'; // 导入

@NgModule({
 declarations: [
  AppComponent,
 ],
 imports: [
  BrowserModule,
  FormsModule,
  HttpClientModule,
  BrowserAnimationsModule,
  HttpFunctionModule.forRoot()  // 从这里导入,执行默认配置
 ]
 bootstrap: [AppComponent]

})

export class AppModule { }

2、 如果接口的返回格式为

{
	otherCode: '200',
	otherMessage: 'success',
	otherData: [
		'id','event','time'
	]
}

全局配置为

import { HttpFunctionModule } from '@interaction/http-function'; // 导入

@NgModule({
 declarations: [
  AppComponent,
 ],
 imports: [
  BrowserModule,
  FormsModule,
  HttpClientModule,
  BrowserAnimationsModule,
  HttpFunctionModule.forRoot({  // 自定义全局配置，可以任意配置接口字段
    code: 'otherCode',  
    codeValue: '200',  
    message: 'otherMessage', 
    data: 'otherData', 
  }) 
 ]
 bootstrap: [AppComponent]

})

export class AppModule { }

备注：如果没有在app.module.ts中导入HttpFunctionModule，则执行默认配置

介绍

1、主要包括五种请求方式：

方法名	参数(请情见下表)
GET	url: string extend：｛ onlyData: boolean errMsg: string ｝
POST	url: string extend：｛ onlyData: boolean errMsg: string ｝
DELETE	url: string extend：｛ onlyData: boolean errMsg: string ｝
PATCH	url: string extend：｛ onlyData: boolean errMsg: string ｝
PUT	url: string extend：｛ onlyData: boolean errMsg: string ｝

2、参数

参数名称	是否必填	参数介绍
url: string	必填	接口url路径
extend: string	非必填	包括两个属性：onlyData和errMsg onlyData:是否只接收data部分数据，默认为false errMsg:错误提示信息，默认值为null

前提

使用的类必须注入HttpClient，如

constructor(

​ public http: HttpClient

) { }

使用(以GET为例，其他都一样)

1、创建一个angular服务，并注入HttpClient

@Injectable({
  providedIn: 'root'
})
export class Service {

  constructor(
    public http: HttpClient,
  ) { }
}

2、在Service中导入GET方法

import { GET } from '@interaction/http-function'

3、在Service中使用GET

@Injectable({
  providedIn: 'root'
})
export class Service {

  constructor(
    public http: HttpClient, // 必须注入HttpClient
  ) { }

  @GET('/getdata')  // 返回接口全部字段
  get(params: { params: HttpParams }): Observable<any> {
    return null;
  }

 @GET('/getdata', {onlyData: true}) // 只返回接口data字段
  getData(params: { params: HttpParams }): Observable<any> {
    return null;
  }

}

4、在组件中使用

export class HomeComponent {
	constructor(
		public service: Service
   ){}

	get(): void {
	  const params: HttpParams = new HttpParams().set('id', `${id}`);
	  this.service.get({ params: params }).subscribe(
		(res)=> {
			// 这里会返回全部接口字段
		},
		(error) => {}
	  )
	}
	
	getData(): void {
	  const params: HttpParams = new HttpParams().set('id', `${id}`);
	  this.service.getData({ params: params }).subscribe(
		(res)=> {
            // 这里只会返回接口中的data字段
        },
		(error) => {}
	  )
	}
}