八、angular6-http get post请求及跨域

1.app.module.ts引入HttpClientModule

  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ]

2.新建my-first-servce.service.ts

ng g s my-first-servce

 添加get和post接口请求

import {Injectable} from "@angular/core";
import {HttpClient, HttpHeaders} from "@angular/common/http";
import {Observable} from "rxjs/Rx";
@Injectable({
  providedIn: 'root'
})
export class MyFirstServceService {
  httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json;charset=utf-8'})
  };

  public anyList: any;
  message: string = '我是服务信息';

  /**
   * get请求
   * @param info
   */
  status(info: Object): any {
    return this.http.get("/api/API/Status")
      .pipe(
        res => {
          this.anyList = res;
          return this.anyList;
        }
      )
  }



  /**
   * post请求
   * @param url
   * @param param
   * @returns {Observable<ObservedValueOf<Observable<never>>|any>}
   */
  addUser(url:string, param): Observable<any[]> {
    return this.http.post(url, param, this.httpOptions)
      .pipe(
        res => {
          this.anyList = res;
          return this.anyList
        }
      )
  }

  constructor(private http: HttpClient) {

  }
}

my-first-componnet.component.ts 获取service的get和post方法

 constructor(private renderer: Renderer2,  private myFirstServceService: MyFirstServceService) {
    //单独的get请求
    myFirstServceService.status("1123").subscribe(
      data =>{
        console.log("getResponse is :",  data);
      }
    );
    //单独的post请求
    this.myFirstServceService.addUser(this.url, this.param).subscribe(data => {
      console.log('data', data)
    })
  }

如果是跨域请求，在根目录下添加proxy.config.json文件

{
  "/api": {//在原请求接口前添加api，‘api’可以起其他的名字如原路径：http://localhost:8080/getUsers,新路径http://localhost:8080/api/getUsers
    "target": "http://localhost:8080",//跨域的服务器地址
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

在angular.json文件的serve中添加proxyConfig":"proxy.config.json

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular6-fundamentals:build",
            "proxyConfig":"proxy.config.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular6-fundamentals:build:production"
            }
          }
        },