angular接口传参

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;
        })
    );
}

angular接口传参

相关文章