Angular数据请求（get,post）

一、Angular get请求数据

Angular5.x以后get, post和和服务器交互使用的是HttpClientModule模块。

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

 import {HttpClientModule} from '@angular/common/http' 

 imports:[
    BrowserModule,
    HttpClientModule
] 

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

 import {HttpClient} from "@angular/common/http"; 

 constructor(public http:Httpclient) {} 

3.   get请求数据

  var  url= "http://127.0.0.1:8080/api/productlist" ;
  this .http.get(url).subscribe (response => {
    console.log(response);
})  

 

二、Angular post提交数据

Angular5.x以后get, post和和服务器交互使用的是HttpClientModule模块。

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

 import {HttpClientModule} from '@angular/common/http' 

 imports:[
    BrowserModule,
    HttpClientModule
] 

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

 import {HttpClient, HttpHeaders} from "@angular/common/http"; 

 constructor(public http:Httpclient) {} 

3, post提交数据

 var  url="http://127.0.0.1:8080/doLogin" ;
 

this.http.post(url, {"age":22,"username":"zl"})
  .subscribe((response)=>{
    console.log(response)
  })

 

三、Angular Jsonp请求数据

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

 import {HttpClientModule,HttpclientJsonpModule} from@angular/common/http'; 

 imports:[
    BrowserModule,
    HttpClientModule,
    HttpClientJsonpModule
] 

2、在用到的地方引入h ttpClient并在构造函数声明

 import {HttpClient} from "@angular/common/http"; 

3, post提交数据

 var url="http://127.0.0.1:8080/doLogin";
 

 this.http.jsonp(url,"callback").subscribe((response:any)=>{ 
   this.userList=response; 
   console.log(response) 
 }) 

 

 

四、Angular中使用第三方模块axios请求数据

1、安装axios

 cnpm install axios --save 

2、用到的地方引入axios

 import axios from 'axios"; 

3,get请求

 var  url= "http://127.0.0.1:8080/api/productlist" ;
axios.get( url )
    .then(  function   (response){
      console.log(response)
　　)}
 

 

五，在服务（service）中通过Promise封装请求

  get(api){
      return   new  Promise((resolve, reject)=> {
           this .http.get(api).subscribe( (response)=> {
             resolve(response);
        })   
    })
}  

 

在用到的组件中引入服务，然后调用方法

 import { CommonService } from 'services/common.service' ;

constructor(public common:CommonService) { }


  this .common.get(api).then((response)-> {
     console. log (response);
   })  

 

查看更多关于Angular数据请求（get,post）的详细内容...