Angula获取服务器数据

Angula获取服务器数据

1.Get

在app.module.ts中引入httpclientModule

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

 imports: [
    BrowserModule,
    HttpClientModule]

 

2.组件使用时进行引入

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

同时需要在构造函数内初始化

使用方法

this.http.get(api).subscribe((response:any)=>{
      console.log(response);
    });

2.post

与get放类似，同时需要引入headerhttpclientModule

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

使用方法

 postData(){
   //需要后台允许跨域
  // alert('postDta');
  const httpOptions={headers:new HttpHeaders({'Content-type':"application/json"})};
  let api="http://。。。。。";//服务器地址
  this.http.post(api,{id:7,title:"hhh",pid:0},httpOptions).subscribe ((response:any)=>{
    console.log(response);
    
  });
  }

3.getjsonpData()

使用内置模块jsonp请求数据，需要服务器能支持jsonp

需要在app.module.ts中引入HttpClientJsonpModule，并import

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

组件使用时无需再次引入

 getjsonpData(){
    let api="http://，，，，";
    this.http.jsonp(api,"callback").subscribe((response)=>{
      console.log(response);
    });
  } 

4.getaxiosData()

使用第三方模块axios获取数据

安装Axios

npm insatll axios --save

组件使用时引入

import  axios from 'axios';

使用方法

getaxiosData(){
    let api="http://，，，";
    axios.get(api).then(function (response){ 
         console.log(response);
        });
  }