1、service文件
创建xxx.service.ts文件
import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ErrorConditionService {
constructor(private http: HttpClient,
@Inject('BASE_CONFIG') private config) { }
} |
BASE_CONFIG在app.module.ts文件中写
providers: [
{
provide: 'BASE_CONFIG',
useValue: {
url: 'myurl'
}
}
] |
设置proxy实现跨域
（在项目根目录下新建proxy.conf.json，然后在package.json文件中配置一下）
1）proxy.conf.json代码 {
"/myurl": {
"target": "http://10.0.0.0:0000",
"secure": true
}
}
2）修改package.json（ng serve -o --proxy-config proxy.conf.json） 
|
2、http请求
post传json格式数据：
const data = {
id: 1
}
ceshi1(data): Observable<any> {
const url = `${this.config.myurl}/xxx/xxxxx`;
return this.http.post(url, data).pipe(
map((res: any) => {
return res;
})
);
} |
post传params格式数据1（传参少且字符短）：
const data = {
id: 1
} ceshi2(data): Observable<any> {
const url = `${this.config.myurl}/xxx/xxxxxx`;
return this.http.post(url, {},{ params: data }).pipe(
map((res: any) => {
return res;
})
);
} |
post传params格式数据2（传参多且字符长）：
const data = {
id: 1，
text：‘成百上千个字节’
} const params = new HttpParams({
fromObject: data
}); ceshi2(data): Observable<any> {
const url = `${this.config.myurl}/xxx/xxxxxx`;
return this.http.post(url, params).pipe(
map((res: any) => {
return res;
})
);
} |
或者（效果同上）
const formData = new FormData();
formData.append('id',1);
formData.append('text','成百上千个字符'); ceshi2(data): Observable<any> {
const url = `${this.config.myurl}/xxx/xxxxxx`;
return this.http.post(url, formData).pipe(
map((res: any) => {
return res;
})
);
} |