Angular入门实战Day07

注：以下内容来源教程 https://www.bilibili.com/video/BV1bt411e71b/?spm_id_from=333.337.search-card.all.click&vd_source=d24d4d209aa65e8fc37220ced9cbcf2f

---

一、Rxjs介绍

RxJS 是 ReactiveX 编程理念的 JavaScript 版本。ReactiveX 来自微软，它是一种针对异步数据流的编程。Angular 引入 RxJS 就是为了让异步可控、更简单。
目前常见的异步编程的几种方法：

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

import { Injectable } from '@angular/core';

// Angular中已经集成了RxJS，不需要安装，直接导入 rxjs 中的 Observable
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RequestService {

  constructor() { }

  // 同步方法
  getData() {
    return 'this is service data';
  }

  // 模拟异步
  getCallBackData(cb:any) {
    setTimeout(() => {
      var username = '张三';
      cb(username);
      return username;
    }, 1000);
  }

  // Promise
  getPromiseData() {
    // resolve：成功的回调函数，reject：失败的回调函数
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        var username = '张三-Promise';
        resolve(username);
      }, 1000);
    });
  }

  // RxJS
  getrxjsData() {
    return new Observable((observer) => {
      setTimeout(() => {
        var username = '张三-RxJS';
        observer.next(username);
        observer.error('error');
      }, 1000);
    });
  }
}

import { Component } from '@angular/core';

import { RequestService } from 'src/app/services/request.service';

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

  constructor(public request:RequestService) { }

  ngOnInit() {
    // 1、同步方法
    let data = this.request.getData();
    console.log(data); // this is service data

    // 2、callback获取异步数据
    let username = this.request.getCallBackData((data:any) => {
      console.log(data); // 张三
    });
    console.log(username); // undefined

    // 3、Promise获取异步数据
    var promiseData = this.request.getPromiseData();
    promiseData.then((data) => {
      console.log(data); // 张三-Promise
    });

    // 4、RxJS获取异步方法中的数据
    var rxjsData = this.request.getrxjsData();
    rxjsData.subscribe((data) => {
      console.log(data); // 张三-RxJS
    });
  }
}

二、Promise 和 RxJS 处理异步对比

• RxJS 和 Promise 的基本用法非常类似；Promise 中用的是 resolve() 和 then()，而 RxJS 中用的是 observer.next() 和 subscribe()。
• 但 RxJS 相比 Promise 要强大很多。RxJS 可以中途撤回、发射多个值、提供了多中工具函数等等。

1、RxJS unsubscribe 取消订阅

// RxJS
getrxjsData() {
  return new Observable((observer) => {
    setTimeout(() => {
      var username = '张三-RxJS';
      observer.next(username);
      observer.error('error');
    }, 3000);
  });
}

// 过一秒后撤回刚才的操作
var stream = this.request.getrxjsData();
var d = stream.subscribe((data) => {
  console.log(data); 
});
setTimeout(() => {
  d.unsubscribe(); // 取消订阅
}, 1000);

2、RxJS 订阅后多次执行

// RxJS 多次执行
getrxjsIntervalData() {
  let count = 0;
  return new Observable((observer) => {
    setInterval(() => {
      count++;
      var username = '张三-RxJS-Interval' + count;
      observer.next(username);
    }, 1000);
  });
}

// rxjs 执行多次
var streamInterval = this.request.getrxjsIntervalData();
streamInterval.subscribe((data) => {
  console.log(data); // 张三-RxJS
});

三、Angular 中的数据交互（get jsonp post）

1、Angular get 请求数据

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

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

imports: [
  BrowserModule,
  HttpClientModule
]

• 在用到的地方引入 HttpClient，并在构造函数中声明

// 当做一个服务
import { HttpClient } from '@angular/common/http';

constructor(public http:HttpClient) { }

• get 请求数据

getData() {
  let api = 'http://a.itying.com/api/productlist';
  // 底层是 rxjs 封装的异步方法
  this.http.get(api).subscribe((res:any) => {
    console.log(res);
    this.list = res.result;
  });
}

2、Angular post 提交数据

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

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

imports: [
  BrowserModule,
  HttpClientModule
]

• 在用到的地方引入 HttpClient，HttpHeaders，并在构造函数中声明 HttpClient

// 当做一个服务
import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(public http:HttpClient) { }

• post 提交数据

doLogin() {
  // 手动设置请求的类型
  const httpOptions = {
    headers: new HttpHeaders({ 'content-Type': 'application/json' })
  };
  // 存在跨域，需要后端允许跨域
  let api = 'http:127.0.0.1:3000/doLogin';
  this.http.post(api, {"username":"张三","age": 20}, httpOptions).subscribe((res) => {
    console.log(res);
  });
}

3、Angular Jsonp 请求数据

• 在 app.module.ts 中引入 HttpClientModule，HttpClientJsonpModule，并注入

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

imports: [
  BrowserModule,
  HttpClientModule,
  HttpClientJsonpModule,
]

• 在用到的地方引入 HttpClient，并在构造函数中声明

// 当做一个服务
import { HttpClient } from '@angular/common/http';

constructor(public http:HttpClient) { }

• jsonp 获取数据

getJsonpGet() {
  // jsonp请求要求服务器必须支持jsonp，验证：api后面加?callback=xxx（callback可以叫其他的），服务器返回xxx(数据)
  let api = 'http://a.itying.com/api/productlist';
  this.http.jsonp(api, 'callback').subscribe((res) => {
    console.log(res);
  });
}

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

• 安装 axios

npm install axios --save

• 用到的地方引入 axios

// 引入 axios
import axios from 'axios';

• 使用 axios 请求数据

axiosGet(api:any) {
  return new Promise((resolve, reject) => {
    axios.get(api).then(function (res:any) {
      resolve(res);
    })
  });
}