angular数据交互

Rxjs特点：针对异步数据流的编程
常见的异步编程的几种方法：

• 回调函数
• 事件监听/发布订阅
• Promise
• Rxjs

Angular get请求数据

get,post和服务器交互使用的HttpClientModule模块。

• 1，在app。module中引入HttpClientModule并注入

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

//依赖注入
 imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],

• 2，在用到的地方引入HttpClient并在构造函数声明
  在home.vue中使用

import { Component, OnInit } from '@angular/core';
import { from } from 'rxjs';
//引入1 当作一个服务
import { HttpClient} from '@angular/common/http'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
//绑定2
  constructor(public http:HttpClient) { }

  ngOnInit(): void {
  }

}

• 3，请求数据并且渲染在页面中
  html

<div>我是主页</div>

<button (click)='getData()'>get请求数据</button>

<hr>
<h1>请求的数据</h1>
<ul>
    <li *ngFor='let item of list'>{
  {item.title}}</li>
</ul>

ts

import { Component, OnInit } from '@angular/core';
import { from } from 'rxjs';
import { HttpClient} from '@angular/common/http'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  public list: any[] = [];

  constructor(public http:HttpClient) { }

  ngOnInit(): void {
  }


  //请求数据
  getData() {
    let api = 'http://a.itying.com/api/productlist';
    //rxjs
    this.http.get(api).subscribe((responsse:any) => {
      console.log(responsse);

      this.list = responsse.result
    })
  }
}

效果

2.post提交数据

• 1，在app。module中引入HttpClientModule并注入

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

//依赖注入
 imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],

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

 <div>我是主页</div>

<button (click)='doLogin()'>post请求数据</button>

ts

import { Component, OnInit } from '@angular/core';
import { from } from 'rxjs';
import { HttpClient,HttpHeaders} from '@angular/common/http'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(public http:HttpClient) { }

  ngOnInit(): void {
  }

  doLogin() {
    
    //手动设置请求的类型

    const httpOptions = { headers: new HttpHeaders({'Content-Type':'app'})}
   
    //提交数据的地址
    //存在跨域问题，后台需要允许跨域
    var api = 'http://localhost:3000';
    this.http.post(api, { 'username': '张三', 'age': 20 }, httpOptions).subscribe((response) => {  
      console.log(response);
    })
  }
}

rxjs

过1秒撤回刚才的操作
home.ts

var streem = this.request.getRxjsData(){
   
	var d = streem.subscript((data)=>{
   
	console.log(data);
})
setTimeout(()=>{
   
		d.unsubscribe();	//取消订阅
	})
}

request.service.ts