快速上手（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和errMsgonlyData:是否只接收data部分数据，默认为falseerrMsg:错误提示信息，默认值为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) => {}
	  )
	}
}