angular请求数据

一、Angular get 请求数据

1. 在app.module.ts中引入HttpClientModule并注入

Import{HttpClientModule } from ‘@angular/commob/http’;


Imports:[
  BrowserModule,
  HttpClientModule
]

2. 在用到的地方引入HttpClient并在构造函数声明

Import {HttpClient} from “@angular/common/http”;

Constructor(public http:HttpClient){ }

3. get请求数据

Var api = “http://a.itying/com/api/productlist”;
This.http.get(api).subscribe(response => {
  Console.log(response);
});

二、Angular post 提交数据

1. 在app.module.ts中引入HttpClientModule并注入

Import{HttpClientModule } from ‘@angular/commob/http’;


Imports:[
  BrowserModule,
  HttpClientModule
]

2. 在用到的地方引入HttpClient、HttpHeaders并在构造函数声明HtpClient

Import {HttpClient,HttpHeaders} from “@angular/common/http”;

Constructor(public http:HttpClient){ }

3. post提交数据

Const httpOptions = {
  Headers:new HttpHeaders({‘Content-Type’:’application/json’})
};
Var api = “http://127.0.0.1:3000/doLogin”;
This.http.post(api,{username:’lio’,age:’20’},httpOptions).subscribe(response => {
  Console.log(response);
});

三、angular jsonp 请求数据

1. 在app.module.ts中引入HttpClientModule、HttpClientJsonpModule并注入

Import{HttpClientModule，HttpClientJsonpModule } from ‘@angular/commob/http’;


Imports:[
  BrowserModule,
  HttpClientModule，
  HttpClientJsonpModule
]

2. 在用到的地方引入HttpClient并在构造函数声明HtpClient

Import {HttpClient} from “@angular/common/http”;

Constructor(public http:HttpClient){ }

3. jsonp请求数据

Var api = “http://a.itying/com/api/productlist”;
This.http.jsonp(api,’callback’).subscribe(response => {
  Console.log(response);
});