Angular笔记 数据请求

一、 Angular 请求数据

1.在app.module.ts中导入

//angular 自带的HTTP请求 模块
import {HttpClientModule} from '@angular/common/http';
在imports中引入[HttpClientModule,]

2.在要调用请求的地方再次导入

//angular 自带的HTTP请求 模块
import {HttpClient} from "@angular/common/http";
//angular 自带的HTTP请求 模块 （请求头设置 post方式）
import {HttpHeaders} from '@angular/common/http';

1. get 请求数据

声明

constructor(public http:HttpClient) { }
  //自带get请求封装
  angularGet(url:string){
    return new Observable((observable)=>{
      this.http.get(url).subscribe(response => {
        observable.next(response);
        
    },(error)=>{
      observable.error(error);
    })
   });
  }

调用

angularGet(){
    var url:string = "http://a.itying.com/api/productlist"; 
    let rxjsData = this.requestservice.angularGet(url);
    rxjsData.subscribe((response:any)=>{
      console.log("成功啦");
      console.log(response);
      this.list = response.result;
    },(error:Object)=>{
      console.log("出错啦");
    });

  }

2. post 请求数据

  constructor(public http:HttpClient) { }
  //自带post请求封装
  constructor(public http:HttpClient) { }
  angularPost(url:string,parameter:any){
    const httpOptions:any = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
      };
    return new Observable((observable)=>{
      this.http.post(url,parameter,httpOptions).subscribe(response => {
        observable.next(response);
    },(error)=>{
      observable.error(error);
    })
   });
  }

调用

  angularPost(){
    let url:string = "http://127.0.0.1:3000/doLogin"; 
    let parameter:any = {username:'张三',age:'20'};
    let rxjsData = this.requestservice.angularPost(url,parameter);
    rxjsData.subscribe((response:any)=>{
      console.log("成功啦");
      console.log(response);
      this.list = response.result;
    },(error:Object)=>{
      console.log("出错啦");
      console.log(error);
    });

  }

二、 Angular Jsonp 请求数据

1.在app.module.ts中导入

//angular 自带的HTTP请求 模块
import {HttpClientModule} from '@angular/common/http';
//angular Jsonp 请求 模块
import {HttpClientJsonpModule} from '@angular/common/http';
在imports中引入[HttpClientModule,HttpClientJsonpModule]

2.在要调用请求的地方再次导入

angular 自带的HTTP请求 模块
import {HttpClient} from "@angular/common/http";

声明

//jsonp get请求封装
  constructor(public http:HttpClient) { }

  jsonpGet(url:string){
    return new Observable((observable)=>{
      this.http.jsonp(url,"callback").subscribe(response => {
        observable.next(response);
        
    },(error)=>{
      observable.error(error);
    })
   });
  }

调用

 jsonpGet(){
    var url:string = "http://a.itying.com/api/productlist"; 
    let rxjsData = this.requestservice.jsonpGet(url);
    rxjsData.subscribe((response:any)=>{
      console.log("成功啦");
      // console.log(response);
      this.list = response.result;
    },(error:Object)=>{
      console.log("出错啦");
    });
  }

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

1、安装 axios
cnpm install axios --save
2、用到的地方引入
axios import axios from 'axios';
3、看文档使用
axios 中文说明

声明

//引入第三方框架 
import axios from 'axios';

//axios  get请求封装
  axiosGet(url:string){
    return new Observable((observable)=>{
          axios.get(url)
        .then(function (response) {
          // handle success
          observable.next(response);
        })
        .catch(function (error) {
          // handle error
          observable.error(error);
        })
        .then(function () {
          // always executed
        });
   });
  }

  //axios  post请求封装
  axiosPost(url:string,parameter:any){
    return new Observable((observable)=>{
      axios.post(url, parameter)
      .then(function (response) {
        // console.log(response);
        observable.next(response);
      })
      .catch(function (error) {
        // console.log(error);
        observable.error(error);
      });
   });
  }

调用

axiosGet(){
    var url:string = "http://a.itying.com/api/productlist"; 
    let rxjsData = this.requestservice.axiosGet(url);
    rxjsData.subscribe((response:any)=>{
      console.log("成功啦");
      console.log(response);
      this.list = response.data.result;
    },(error:Object)=>{
      console.log("出错啦");
      console.log(error);
    });

  }

  axiosPost(){
    let url:string = "http://127.0.0.1:3000/doLogin"; 
    let parameter:any = {username:'张三',age:'20'};
    let rxjsData = this.requestservice.axiosPost(url,parameter);
    rxjsData.subscribe((response:any)=>{
      console.log("成功啦");
      console.log(response);
      this.list = response.result;
    },(error:Object)=>{
      console.log("出错啦");
      console.log(error);
    });

  }