npm package: @interaction/http-function
Description: ```js npm i @interaction/http-function ```
Latest version: 0.2.1

# 快速上手（HttpFunction）

## 安装

```js
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、如果接口的返回格式为

```js
{
	code: '1000000',
	message: 'success',
	data: [
		'id','event','time'
	]
}
```

全局配置为默认值即可

```js
import { HttpFunctionModule } from '@interaction/http-function'; // 导入

@NgModule({
 declarations: [
  AppComponent,
 ],
 imports: [
  BrowserModule,
  FormsModule,
  HttpClientModule,
  BrowserAnimationsModule,
  HttpFunctionModule.forRoot()  // 从这里导入,执行默认配置
 ]
 bootstrap: [AppComponent]

})

export class AppModule { }
```

2、 如果接口的返回格式为

```js
{
	otherCode: '200',
	otherMessage: 'success',
	otherData: [
		'id','event','time'
	]
}
```

全局配置为

```js
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 <br/>extend：｛<br/>  onlyData: boolean<br/>  errMsg: string<br/>｝ |
| POST   | url: string <br/>extend：｛<br/>  onlyData: boolean<br/>  errMsg: string<br/>｝ |
| DELETE | url: string <br/>extend：｛<br/>  onlyData: boolean<br/>  errMsg: string<br/>｝ |
| PATCH  | url: string <br/>extend：｛<br/>  onlyData: boolean<br/>  errMsg: string<br/>｝ |
| PUT    | url: string <br/>extend：｛<br/>  onlyData: boolean<br/>  errMsg: string<br/>｝ |

#### 2、参数

| 参数名称       | 是否必填 | 参数介绍                                                     |
| -------------- | -------- | ------------------------------------------------------------ |
| url: string    | 必填     | 接口url路径                                                  |
| extend: string | 非必填   | 包括两个属性：onlyData和errMsg<br/>onlyData:是否只接收data部分数据，默认为false<br/>errMsg:错误提示信息，默认值为null |

## 前提

使用的类必须注入HttpClient，如

constructor(

​	public http: HttpClient

) { }

## 使用(以GET为例，其他都一样)

#### 1、创建一个angular服务，并注入HttpClient

```js
@Injectable({
  providedIn: 'root'
})
export class Service {

  constructor(
    public http: HttpClient,
  ) { }
}
```

#### 2、在Service中导入GET方法

```js
import { GET } from '@interaction/http-function'
```

#### 3、在Service中使用GET

```js
@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、在组件中使用

```js
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) => {}
	  )
	}
}
```